:root {
      --bg: #080a0f;
      --surface: #0f1117;
      --card: #141820;
      --border: rgba(255, 255, 255, 0.07);
      --border-gold: rgba(212, 175, 100, 0.35);
      --gold: #d4af64;
      --gold-dim: rgba(212, 175, 100, 0.15);
      --amber: #e07d3c;
      --cream: #f0ead8;
      --muted: #6b7280;
      --soft: rgba(240, 234, 216, 0.55);
      --green: #4ade80;
      --green-dim: rgba(74, 222, 128, 0.12);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --r: 10px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--cream);
      font-family: 'Outfit', sans-serif;
      font-weight: 300;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 100, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 70% 55% at 15% 0%, rgba(212, 175, 100, 0.04) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(224, 125, 60, 0.03) 0%, transparent 60%);
      background-size: 200% 200%;
      animation: bgDrift 20s ease infinite alternate;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .018;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .z {
      position: relative;
      z-index: 1
    }

    .wrap {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 28px
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      padding: 18px 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(24px);
      background: rgba(8, 10, 15, 0.75);
      border-bottom: 1px solid var(--border);
    }

    .logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .logo-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      opacity: .7;
      animation: pulse 2s infinite var(--ease)
    }

    .nav-r {
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 130px 28px 80px
    }

    .hero-tag {
      font-size: .68rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
      opacity: 0;
      animation: up .7s var(--ease) .2s forwards
    }

    .hero-h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3.2rem, 9vw, 7rem);
      font-weight: 700;
      line-height: .95;
      opacity: 0;
      animation: up .9s var(--ease) .38s forwards
    }

    .hero-h1 em {
      font-style: italic;
      color: var(--gold);
      display: inline-block;
      animation: floatGold 6s ease-in-out infinite
    }

    .hero-sub {
      font-size: 1.05rem;
      color: var(--soft);
      max-width: 500px;
      margin: 24px auto 52px;
      line-height: 1.75;
      opacity: 0;
      animation: up .9s var(--ease) .55s forwards
    }

    /* INPUT HUB */
    .input-hub {
      width: 100%;
      max-width: 680px;
      opacity: 0;
      animation: up .9s var(--ease) .7s forwards
    }

    .tab-row {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px 8px 0 0;
      overflow: hidden
    }

    .tab {
      flex: 1;
      padding: 14px 16px;
      text-align: center;
      font-size: .82rem;
      letter-spacing: .06em;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .25s;
      user-select: none
    }

    .tab.active {
      color: var(--gold);
      border-bottom-color: var(--gold);
      background: rgba(212, 175, 100, .05)
    }

    .tab:hover:not(.active) {
      color: var(--cream)
    }

    .panel {
      display: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 8px 8px;
      padding: 24px
    }

    .panel.active {
      display: block;
      animation: fadeUp .4s var(--ease) forwards
    }

    /* drop zone */
    .drop-zone {
      border: 1px dashed rgba(212, 175, 100, .3);
      border-radius: var(--r);
      padding: 48px 32px;
      text-align: center;
      cursor: pointer;
      transition: all .3s var(--ease)
    }

    .drop-zone:hover,
    .drop-zone.over {
      border-color: var(--gold);
      background: var(--gold-dim)
    }

    .drop-zone.over .drop-icon {
      animation: bounce 0.6s infinite alternate var(--ease)
    }

    .drop-icon {
      font-size: 2.8rem;
      margin-bottom: 14px;
      display: inline-block;
      animation: floatBottle 4s ease-in-out infinite
    }

    .drop-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      margin-bottom: 8px
    }

    .drop-sub {
      font-size: .82rem;
      color: var(--muted);
      margin-bottom: 22px
    }

    #file-input {
      display: none
    }

    .btn-file {
      display: inline-block;
      border: 1px solid var(--gold);
      color: var(--gold);
      padding: 10px 24px;
      border-radius: 4px;
      font-size: .82rem;
      letter-spacing: .07em;
      cursor: pointer;
      transition: all .2s;
      font-family: 'Outfit', sans-serif;
      background: transparent;
      margin: 0 4px;
    }

    .btn-file:hover {
      background: var(--gold);
      color: var(--bg)
    }

    /* Camera Overlay */
    #cam-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      z-index: 1000;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    #cam-overlay.show {
      display: flex;
      animation: fadeUp .4s var(--ease) forwards;
    }

    .cam-viewport {
      width: 100%;
      max-width: 500px;
      aspect-ratio: 3/4;
      background: #000;
      border-radius: var(--r);
      overflow: hidden;
      position: relative;
      border: 1px solid var(--border-gold);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    #cam-video,
    #cam-canvas {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    #cam-canvas {
      display: none;
    }

    .cam-controls {
      display: flex;
      gap: 16px;
      margin-top: 24px;
      width: 100%;
      max-width: 500px;
      justify-content: center;
    }

    .btn-round {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      background: rgba(212, 175, 100, 0.1);
      color: var(--gold);
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .btn-round:hover {
      background: var(--gold);
      color: var(--bg);
      transform: scale(1.05);
    }

    .close-cam {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 1.5rem;
      background: transparent;
      border: none;
      color: white;
      cursor: pointer;
    }

    /* preview */
    #preview-wrap {
      display: none;
      margin-top: 18px
    }

    .preview-row {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px
    }

    #prev-img {
      width: 100px;
      height: 134px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid var(--border)
    }

    .prev-info {
      flex: 1
    }

    .prev-name {
      font-weight: 500;
      margin-bottom: 4px;
      font-size: .92rem
    }

    .prev-size {
      font-size: .78rem;
      color: var(--muted);
      margin-bottom: 16px
    }

    .btn-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    /* search */
    .search-wrap {
      position: relative
    }

    .search-input {
      width: 100%;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 18px 56px 18px 20px;
      color: var(--cream);
      font-family: 'Outfit', sans-serif;
      font-size: 1rem;
      font-weight: 300;
      outline: none;
      transition: border-color .25s
    }

    .search-input:focus {
      border-color: var(--gold)
    }

    .search-input::placeholder {
      color: var(--muted)
    }

    .search-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--gold);
      border: none;
      border-radius: 6px;
      width: 36px;
      height: 36px;
      cursor: pointer;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s
    }

    .search-btn:hover {
      background: color-mix(in srgb, var(--gold) 80%, white)
    }

    .quick-searches {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px
    }

    .qs {
      font-size: .75rem;
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      background: transparent;
      font-family: 'Outfit', sans-serif;
      transition: all .2s
    }

    .qs:hover {
      border-color: var(--gold);
      color: var(--gold);
      transform: scale(1.05) translateY(-1px);
      box-shadow: 0 4px 12px rgba(212, 175, 100, 0.15)
    }

    /* buttons */
    .btn-primary {
      background: var(--gold);
      color: var(--bg);
      border: none;
      padding: 13px 32px;
      border-radius: 5px;
      font-family: 'Outfit', sans-serif;
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: .06em;
      cursor: pointer;
      transition: all .25s var(--ease);
      display: inline-flex;
      align-items: center;
      gap: 9px;
      position: relative;
      overflow: hidden
    }

    .btn-primary::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
      transform: rotate(30deg) translateX(-100%);
      transition: transform 0.6s ease
    }

    .btn-primary:hover::after {
      transform: rotate(30deg) translateX(100%)
    }

    .btn-primary:hover {
      background: color-mix(in srgb, var(--gold) 80%, white);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(212, 175, 100, 0.2)
    }

    .btn-primary:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none
    }

    /* Button Loading State */
    .btn-loading {
      color: transparent !important;
      pointer-events: none;
      position: relative;
    }

    .btn-loading::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: btnSpin 0.8s linear infinite;
    }

    @keyframes btnSpin {
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
      padding: 13px 20px;
      border-radius: 5px;
      font-family: 'Outfit', sans-serif;
      font-size: .82rem;
      cursor: pointer;
      transition: all .2s
    }

    .btn-ghost:hover {
      border-color: var(--muted);
      color: var(--cream)
    }

    /* LOADER */
    #loader {
      display: none;
      text-align: center;
      padding: 80px 0
    }

    /* ── Bottle Loader ──────────────────────────────────────────── */
    .bottle-loader {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-bottom: 28px;
    }

    .bottle-svg {
      width: 90px;
      height: 200px;
      overflow: visible;
      filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.35));
      animation: bottleFloat 3s ease-in-out infinite;
    }

    /* Glass shell */
    .bottle-glass {
      fill: rgba(16, 14, 28, 0.65);
      stroke: rgba(201, 168, 76, 0.55);
      stroke-width: 1.5;
      stroke-linejoin: round;
    }

    /* Neck ring */
    .bottle-neck-ring {
      fill: rgba(201, 168, 76, 0.3);
      stroke: rgba(201, 168, 76, 0.5);
      stroke-width: 1;
    }

    /* Cork */
    .bottle-cork {
      fill: #c9a84c;
      opacity: 0.9;
      animation: corkWiggle 2.8s ease-in-out infinite;
      transform-origin: 40px 0px;
    }

    /* Liquid inside */
    .bottle-liquid {
      fill: url(#liquidGrad);
      fill: rgba(185, 110, 30, 0.82);
      animation: liquidShimmer 2.5s ease-in-out infinite alternate;
    }

    /* Wave at the surface of the liquid */
    .bottle-wave {
      fill: rgba(230, 160, 60, 0.45);
      animation: waveRock 1.8s ease-in-out infinite;
    }

    /* Bubbles rising inside the bottle */
    .bubble {
      fill: rgba(255, 220, 120, 0.55);
    }
    .b1 { animation: bubbleRise 2.1s ease-in infinite 0.0s; }
    .b2 { animation: bubbleRise 2.6s ease-in infinite 0.4s; }
    .b3 { animation: bubbleRise 2.3s ease-in infinite 0.9s; }
    .b4 { animation: bubbleRise 1.9s ease-in infinite 0.2s; }
    .b5 { animation: bubbleRise 2.8s ease-in infinite 1.1s; }

    /* Label on the bottle */
    .bottle-label {
      fill: rgba(201, 168, 76, 0.1);
      stroke: rgba(201, 168, 76, 0.4);
      stroke-width: 1;
      animation: labelPulse 2s ease-in-out infinite;
    }

    .bottle-label-line {
      stroke: rgba(201, 168, 76, 0.3);
      stroke-width: 0.8;
      stroke-linecap: round;
    }

    /* Glow ring beneath bottle */
    .bottle-glow-ring {
      width: 60px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(201, 168, 76, 0.45) 0%, transparent 70%);
      margin-top: -8px;
      animation: glowPulse 3s ease-in-out infinite;
    }

    /* ── Bottle Keyframes ──────────────────────────────────────── */
    @keyframes bottleFloat {
      0%, 100% { transform: translateY(0px) rotate(-1deg); }
      50%       { transform: translateY(-10px) rotate(1deg); }
    }

    @keyframes corkWiggle {
      0%, 100% { transform: rotate(0deg); }
      25%       { transform: rotate(-4deg); }
      75%       { transform: rotate(4deg); }
    }

    @keyframes liquidShimmer {
      from { fill: rgba(185, 110, 30, 0.78); }
      to   { fill: rgba(220, 140, 50, 0.88); }
    }

    @keyframes waveRock {
      0%, 100% { transform: translateX(-4px) scaleX(1.05); }
      50%       { transform: translateX(4px) scaleX(0.95); }
    }

    @keyframes bubbleRise {
      0%   { transform: translateY(0px);   opacity: 0.6; }
      60%  { opacity: 0.6; }
      100% { transform: translateY(-90px); opacity: 0; }
    }

    @keyframes labelPulse {
      0%, 100% { stroke: rgba(201, 168, 76, 0.4); fill: rgba(201, 168, 76, 0.1); }
      50%       { stroke: rgba(201, 168, 76, 0.8); fill: rgba(201, 168, 76, 0.2); }
    }

    @keyframes glowPulse {
      0%, 100% { opacity: 0.5; transform: scaleX(1); }
      50%       { opacity: 1;   transform: scaleX(1.3); }
    }

    .loader-msg {
      color: var(--soft);
      font-size: .9rem;
      letter-spacing: .06em
    }

    .loader-step {
      color: var(--gold);
      font-size: .78rem;
      margin-top: 7px;
      min-height: 18px
    }

    /* ERROR */
    #err-box {
      display: none;
      background: rgba(239, 68, 68, .08);
      border: 1px solid rgba(239, 68, 68, .3);
      border-radius: var(--r);
      padding: 18px 22px;
      color: #f87171;
      font-size: .88rem;
      margin-top: 18px
    }

    #err-box.show {
      display: block;
      animation: up .4s ease both
    }

    /* ADSENSE PLACEHOLDER */
    .ad-container {
      width: 100%;
      max-width: 728px;
      margin: 40px auto;
      text-align: center;
      background: var(--surface);
      border: 1px dashed var(--border-gold);
      border-radius: var(--r);
      padding: 10px;
      position: relative;
    }

    .ad-label {
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg);
      padding: 0 10px;
      border: 1px solid var(--border-gold);
      border-radius: 4px;
    }

    .ad-placeholder {
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--soft);
      font-size: 0.85rem;
      background: rgba(0,0,0,0.2);
      border-radius: 4px;
      overflow: hidden;
    }

    /* RESULTS */
    #results {
      display: none;
      padding: 64px 0 80px
    }

    #results.show {
      display: block;
      animation: up .7s var(--ease) both
    }

    /* detected banner */
    .det-banner {
      background: linear-gradient(135deg, #12100a 0%, #0e1014 100%);
      border: 1px solid var(--gold);
      border-radius: 14px;
      padding: 36px 40px;
      display: flex;
      align-items: center;
      gap: 32px;
      margin-bottom: 44px;
      position: relative;
      overflow: hidden
    }

    .det-banner::after {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212, 175, 100, .08), transparent 70%)
    }

    .det-emoji {
      font-size: 4.5rem;
      line-height: 1;
      flex-shrink: 0;
      animation: tilt 4s ease-in-out infinite
    }

    .det-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.2rem;
      font-weight: 700;
      margin-bottom: 6px;
      line-height: 1.1
    }

    .det-type-pill {
      display: inline-block;
      background: var(--gold);
      color: var(--bg);
      font-size: .65rem;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 12px
    }

    .det-desc {
      color: var(--soft);
      font-size: .88rem;
      line-height: 1.65;
      max-width: 520px
    }

    /* cal strip */
    .cal-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 48px
    }

    .cal-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 26px 20px;
      text-align: center
    }

    .cal-label {
      font-size: .65rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px
    }

    .cal-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3rem;
      font-weight: 700;
      color: var(--gold);
      line-height: 1
    }

    .cal-unit {
      font-size: .75rem;
      color: var(--muted);
      margin-top: 4px
    }

    /* section head */
    .s-label {
      font-size: .65rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px
    }

    .s-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      margin-bottom: 24px
    }

    .s-title em {
      font-style: italic;
      color: var(--gold)
    }

    /* result tabs */
    .res-tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 4px
    }

    .res-tab {
      flex: 1;
      padding: 11px 12px;
      text-align: center;
      border-radius: 6px;
      font-size: .82rem;
      font-weight: 500;
      cursor: pointer;
      color: var(--muted);
      transition: all .2s
    }

    .res-tab.active {
      background: var(--card);
      color: var(--cream);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .3)
    }

    .res-tab:hover:not(.active) {
      color: var(--cream)
    }

    .res-panel {
      display: none
    }

    .res-panel.active {
      display: block;
      animation: fadeUp .4s var(--ease) forwards
    }

    /* cocktail cards */
    .cocktail-list {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .cc {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
      transition: border-color .25s, transform .25s var(--ease);
      animation: up .5s var(--ease) both
    }

    .cc:nth-child(1) {
      animation-delay: .05s
    }

    .cc:nth-child(2) {
      animation-delay: .12s
    }

    .cc:nth-child(3) {
      animation-delay: .19s
    }

    .cc:nth-child(4) {
      animation-delay: .26s
    }

    .cc:hover {
      border-color: rgba(212, 175, 100, .5);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(212, 175, 100, 0.1)
    }

    .cc-head {
      padding: 20px 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none
    }

    .cc-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 7px
    }

    .cc-meta {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap
    }

    .diff {
      font-size: .63rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 20px;
      font-weight: 600
    }

    .easy {
      background: rgba(74, 222, 128, .12);
      color: #4ade80;
      border: 1px solid rgba(74, 222, 128, .25)
    }

    .medium {
      background: rgba(212, 175, 100, .1);
      color: var(--gold);
      border: 1px solid var(--border-gold)
    }

    .hard {
      background: rgba(239, 68, 68, .1);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, .25)
    }

    .cc-cal {
      font-size: .75rem;
      color: var(--muted)
    }

    .chev {
      color: var(--muted);
      font-size: .9rem;
      transition: transform .25s;
      flex-shrink: 0;
      margin-left: 12px
    }

    .cc.open .chev {
      transform: rotate(180deg)
    }

    .cc-body {
      display: none;
      padding: 0 24px 24px;
      border-top: 1px solid var(--border)
    }

    .cc.open .cc-body {
      display: block;
      animation: down .3s ease
    }

    .mixers-lbl {
      font-size: .63rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 18px 0 10px
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 18px
    }

    .chip {
      font-size: .76rem;
      background: rgba(212, 175, 100, .07);
      border: 1px solid rgba(212, 175, 100, .18);
      color: var(--cream);
      padding: 4px 12px;
      border-radius: 4px
    }

    .instruct {
      font-size: .86rem;
      color: var(--soft);
      line-height: 1.72;
      border-left: 2px solid var(--gold);
      padding-left: 16px
    }

    /* snack/munchie cards */
    .snack-list {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .sc {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
      animation: up .5s var(--ease) both;
      transition: border-color .25s, transform .25s var(--ease)
    }

    .sc:nth-child(1) {
      animation-delay: .05s
    }

    .sc:nth-child(2) {
      animation-delay: .12s
    }

    .sc:nth-child(3) {
      animation-delay: .19s
    }

    .sc:hover {
      border-color: rgba(74, 222, 128, .4);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(74, 222, 128, 0.1)
    }

    .sc-head {
      padding: 20px 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .sc-left {
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .sc-icon {
      font-size: 2.2rem;
      line-height: 1;
      flex-shrink: 0
    }

    .sc-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 5px
    }

    .sc-cals {
      font-size: .75rem;
      color: var(--green);
      margin-bottom: 5px
    }

    .sc-why {
      font-size: .82rem;
      color: var(--soft);
      line-height: 1.6
    }

    .sc-body {
      display: none;
      padding: 0 24px 24px;
      border-top: 1px solid var(--border)
    }

    .sc.open .sc-body {
      display: block;
      animation: down .3s ease
    }

    .recipe-lbl {
      font-size: .63rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--green);
      margin: 18px 0 10px
    }

    .ing-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 18px
    }

    .ing-list li {
      font-size: .83rem;
      color: var(--soft);
      padding: 6px 12px;
      background: var(--green-dim);
      border-radius: 4px;
      display: flex;
      justify-content: space-between
    }

    .ing-cal {
      color: var(--green);
      font-weight: 500
    }

    .recipe-steps {
      font-size: .84rem;
      color: var(--soft);
      line-height: 1.72;
      border-left: 2px solid var(--green);
      padding-left: 16px
    }

    .total-cal-bar {
      margin-top: 16px;
      padding: 12px 16px;
      background: rgba(74, 222, 128, .07);
      border: 1px solid rgba(74, 222, 128, .2);
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .82rem
    }

    .total-cal-bar strong {
      color: var(--green);
      font-size: 1.05rem
    }

    .meta-pills {
      display: flex;
      gap: 16px;
      margin-bottom: 6px;
      flex-wrap: wrap
    }

    .meta-pill {
      font-size: .76rem;
      color: var(--muted)
    }

    /* ornament */
    .orn {
      display: flex;
      align-items: center;
      gap: 16px;
      color: rgba(212, 175, 100, .25);
      margin: 52px 0
    }

    .orn::before,
    .orn::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(212, 175, 100, .2))
    }

    .orn::after {
      background: linear-gradient(to left, transparent, rgba(212, 175, 100, .2))
    }

    /* animations */
    @keyframes up {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes down {
      from {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: .7
      }

      50% {
        transform: scale(1.5);
        opacity: 1;
        box-shadow: 0 0 8px var(--gold)
      }
    }

    @keyframes floatGold {

      0%,
      100% {
        transform: translateY(0);
        text-shadow: 0 0 15px rgba(212, 175, 100, 0)
      }

      50% {
        transform: translateY(-5px);
        text-shadow: 0 0 25px rgba(212, 175, 100, 0.4)
      }
    }

    @keyframes bgDrift {
      0% {
        background-position: 0% 0%
      }

      100% {
        background-position: 100% 100%
      }
    }

    @keyframes bounce {
      from {
        transform: translateY(0)
      }

      to {
        transform: translateY(-10px) scale(1.1)
      }
    }

    @keyframes tilt {

      0%,
      100% {
        transform: rotate(0deg)
      }

      25% {
        transform: rotate(-10deg)
      }

      75% {
        transform: rotate(10deg)
      }
    }

    @keyframes floatBottle {

      0%,
      100% {
        transform: translateY(0) rotate(-2deg);
      }

      50% {
        transform: translateY(-10px) rotate(5deg);
      }
    }

    footer {
      border-top: 1px solid var(--border);
      padding: 36px 0;
      text-align: center;
      color: var(--muted);
      font-size: .78rem;
      letter-spacing: .05em;
      position: relative;
      z-index: 1
    }

    footer em {
      color: var(--gold);
      font-style: normal
    }

    @media(max-width:640px) {
      .det-banner {
        flex-direction: column;
        gap: 20px;
        padding: 28px 24px
      }

      .cal-strip {
        grid-template-columns: 1fr 1fr
      }

      .cal-strip .cal-card:last-child {
        grid-column: 1/-1
      }

      nav {
        padding: 16px 20px
      }
    }

    /* Google Ads */
    .ad-container {
      width: 100%;
      max-width: 728px;
      margin: 40px auto;
      text-align: center;
      position: relative;
      z-index: 10;
    }

    .ad-placeholder {
      width: 100%;
      height: 90px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px dashed rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .ad-label {
      font-size: 0.65rem;
      color: var(--muted);
      margin-bottom: 8px;
      display: block;
      letter-spacing: 0.1em;
    }

    /* ── PWA Install Banner ──────────────────────────────────────── */
    #install-banner {
      position: fixed;
      bottom: -120px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 480px;
      background: linear-gradient(135deg, rgba(20, 16, 30, 0.96), rgba(30, 22, 45, 0.96));
      border: 1px solid rgba(201, 168, 76, 0.35);
      border-radius: 16px;
      padding: 16px 20px;
      z-index: 9999;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 168, 76, 0.1);
      transition: bottom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #install-banner.visible {
      bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* iOS how-to steps inside banner */
    .ios-steps {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(201, 168, 76, 0.18);
      width: 100%;
    }

    .ios-step {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      color: var(--soft);
    }

    .ios-step-num {
      background: rgba(201, 168, 76, 0.15);
      border: 1px solid rgba(201, 168, 76, 0.3);
      color: var(--gold);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      min-width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      font-weight: 700;
    }

    .install-banner-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .install-icon {
      font-size: 2rem;
      flex-shrink: 0;
      filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.5));
    }

    .install-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .install-text strong {
      font-size: 0.92rem;
      color: var(--cream);
      font-weight: 600;
    }

    .install-text span {
      font-size: 0.75rem;
      color: var(--muted);
    }

    #install-btn {
      background: linear-gradient(135deg, #c9a84c, #e8c97a);
      color: #0a0910;
      border: none;
      border-radius: 8px;
      padding: 9px 18px;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      font-family: 'Outfit', sans-serif;
    }

    #install-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 16px rgba(201, 168, 76, 0.4);
    }

    #dismiss-install {
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 1rem;
      padding: 4px;
      border-radius: 4px;
      transition: color 0.2s;
      flex-shrink: 0;
    }

    #dismiss-install:hover {
      color: var(--cream);
    }