/* Safeish — warm cream + espresso aesthetic. Single theme. */

:root {
  /* surfaces */
  --amk-bg: #F5EFE4;
  --amk-bg-deep: #EBE3D2;
  --amk-surface: #FFFBF2;
  --amk-surface-alt: #EFE7D5;
  --amk-ink: #1F1A12;
  --amk-ink-2: #5C5141;
  --amk-ink-3: #998A72;
  --amk-hairline: rgba(31,26,18,0.08);
  --amk-hairline-strong: rgba(31,26,18,0.14);

  /* primary — burnt orange */
  --amk-orange: #E26B2C;
  --amk-orange-deep: #B14A14;
  --amk-orange-soft: #FBE4D2;
  --amk-orange-ink: #5A2208;

  /* status */
  --amk-safe: #3FA66B;
  --amk-safe-soft: #DCEFE0;
  --amk-safe-ink: #1E6B3E;
  --amk-caution: #D98A1F;
  --amk-caution-soft: #F7E5C7;
  --amk-caution-ink: #7A4F12;
  --amk-harm: #C84A3A;
  --amk-harm-soft: #F3D6CE;
  --amk-harm-ink: #7A2917;
  --amk-unknown: #A89A85;
  --amk-unknown-soft: #E9E2D1;
  --amk-unknown-ink: #5C5341;

  /* type */
  --amk-font: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --amk-font-display: "Fraunces", Georgia, serif;
  --amk-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* radii */
  --amk-r-chip: 14px;
  --amk-r-card: 26px;
  --amk-r-sheet: 32px;
  --amk-r-pill: 999px;

  /* shadows */
  --amk-shadow-card: 0 1px 2px rgba(80,55,20,0.04), 0 8px 24px rgba(80,55,20,0.07);
  --amk-shadow-soft: 0 2px 14px rgba(80,55,20,0.08);
  --amk-shadow-pop: 0 12px 36px rgba(80,55,20,0.18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--amk-bg);
  color: var(--amk-ink);
  font-family: var(--amk-font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hide scrollbar on the main page scroll while keeping the page scrollable.
   Scoped away from demo-mode body — that one keeps a reserved gutter so the
   centered phone frame doesn't shift when content grows. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body:not(.amk-demo) { scrollbar-width: none; }
body:not(.amk-demo)::-webkit-scrollbar { display: none; }

button { font-family: inherit; }

/* App shell */

.amk-app {
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--amk-bg);
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Header */

.amk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 14px calc(18px + env(safe-area-inset-left));
  background: color-mix(in srgb, var(--amk-bg) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--amk-hairline);
}

.amk-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.amk-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.amk-header__brand:hover .amk-header__title { color: var(--amk-orange-deep); }
.amk-header__brand:active { transform: scale(0.98); }

.amk-header__mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--amk-orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.amk-header__mark svg, .amk-header__mark [data-lucide] {
  width: 16px; height: 16px; stroke-width: 2;
}

.amk-header__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.4px;
  line-height: 1;
}

.amk-header__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--amk-ink-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 2px;
}

.amk-header__controls {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 70%;
  justify-content: flex-end;
}

.amk-lang {
  padding: 8px 22px 8px 12px;
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--amk-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231F1A12' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  flex-shrink: 0;
}

.amk-allergens-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  overflow: hidden;
}
.amk-allergens-wrap:focus-within { border-color: var(--amk-orange); }

.amk-allergens {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--amk-ink);
  min-width: 0;
  flex: 1 1 auto;
}

.amk-allergens::placeholder { color: var(--amk-ink-3); font-weight: 400; }
.amk-allergens:focus { outline: none; }

.amk-allergens__save {
  border: 0;
  border-left: 1px solid var(--amk-hairline);
  background: var(--amk-surface-alt);
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--amk-ink-2);
  cursor: pointer;
  flex-shrink: 0;
}
.amk-allergens__save:hover { background: var(--amk-orange-soft); color: var(--amk-orange-deep); }

/* Upload screen */

.amk-upload {
  padding: 24px 16px 0;
  display: flex; flex-direction: column; gap: 14px;
}

.amk-hero {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 28px 22px;
  box-shadow: var(--amk-shadow-card);
}

/* Greeting strip — replaces the big marketing hero on the upload screen. */
.amk-greet { padding: 0 4px; }
.amk-greet__hi {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.amk-greet__tagline {
  font-size: 14px;
  color: var(--amk-ink-2);
  margin-top: 4px;
}

/* Tip card — friendly nudges between drop zone and recent scans. */
.amk-tip {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  min-height: 84px;
  background: color-mix(in srgb, var(--amk-orange-soft) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--amk-orange) 18%, transparent);
  border-radius: var(--amk-r-chip);
  position: relative;
}

.amk-tip__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--amk-r-pill);
  background: color-mix(in srgb, var(--amk-orange) 18%, transparent);
  color: var(--amk-orange-deep);
}
.amk-tip__icon svg,
.amk-tip__icon [data-lucide] { width: 24px; height: 24px; stroke-width: 1.8; }

.amk-tip__text { flex: 1; min-width: 0; padding-right: 36px; }
.amk-tip__kicker {
  font-size: 10px;
  font-weight: 700;
  color: var(--amk-orange-deep);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.amk-tip__body {
  font-size: 13px;
  color: var(--amk-ink);
  margin-top: 2px;
  line-height: 1.45;
  /* Reserve exactly 3 lines so short tips don't collapse the card. Longer
     tips still grow it; min-height is the floor, not the ceiling. */
  min-height: 4.35em;
}

.amk-tip__refresh {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: var(--amk-r-pill);
  border: 0;
  background: transparent;
  color: var(--amk-orange-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), opacity 0.18s, background 0.18s;
}
.amk-tip__refresh:hover { opacity: 1; background: color-mix(in srgb, var(--amk-orange) 14%, transparent); }
.amk-tip__refresh:active { transform: rotate(180deg); }
.amk-tip__refresh svg,
.amk-tip__refresh [data-lucide] { width: 16px; height: 16px; stroke-width: 2; }

/* Recent scans — horizontal scroll of mocked history cards. */
.amk-recent {}
.amk-recent .amk-section-title { margin-top: 4px; padding-bottom: 8px; }

/* Asymmetric bleed: first card aligns with other content blocks above
   (greet, drop, tip — all at .amk-upload's 16px content edge); the right
   edge extends past the screen so trailing cards naturally peek when more
   exist. Peek is the only cue we need. */
.amk-recent__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-right: -16px;
  padding: 0 16px 6px 0;
  scrollbar-width: none;
}
.amk-recent__row::-webkit-scrollbar { display: none; }

.amk-recent__card {
  flex: 0 0 auto;
  width: 124px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-chip);
  padding: 10px;
  scroll-snap-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform 0.08s, box-shadow 0.18s;
}
.amk-recent__card:hover { box-shadow: var(--amk-shadow-soft); transform: translateY(-1px); }
.amk-recent__card:active { transform: translateY(0); }

.amk-recent__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--amk-surface-alt) 0, var(--amk-surface-alt) 6px, var(--amk-bg-deep) 6px, var(--amk-bg-deep) 12px);
}
.amk-recent__thumb svg,
.amk-recent__thumb [data-lucide] { width: 30px; height: 30px; stroke-width: 1.8; }
.amk-recent__thumb--safe    { background: linear-gradient(135deg, var(--amk-safe-soft), color-mix(in srgb, var(--amk-safe) 18%, transparent)); color: var(--amk-safe-ink); }
.amk-recent__thumb--caution { background: linear-gradient(135deg, var(--amk-caution-soft), color-mix(in srgb, var(--amk-caution) 18%, transparent)); color: var(--amk-caution-ink); }
.amk-recent__thumb--avoid   { background: linear-gradient(135deg, var(--amk-harm-soft), color-mix(in srgb, var(--amk-harm) 18%, transparent)); color: var(--amk-harm-ink); }
.amk-recent__thumb--unknown { background: linear-gradient(135deg, var(--amk-unknown-soft), color-mix(in srgb, var(--amk-unknown) 18%, transparent)); color: var(--amk-unknown-ink); }

.amk-recent__brand {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amk-recent__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--amk-ink);
  margin-top: 2px;
  letter-spacing: -0.1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amk-recent__time {
  font-size: 10.5px;
  color: var(--amk-ink-3);
  margin-top: 4px;
}

.amk-recent__empty {
  font-size: 13px;
  color: var(--amk-ink-3);
  padding: 16px;
  background: var(--amk-surface);
  border: 1px dashed var(--amk-hairline-strong);
  border-radius: var(--amk-r-chip);
  text-align: center;
}

/* Demo footer note */
.amk-footer-note {
  text-align: center;
  font-size: 11px;
  color: var(--amk-ink-3);
  margin-top: 14px;
  /* Push the foot up so the sticky tab bar doesn't cover it at scroll-end. */
  margin-bottom: 96px;
  opacity: 0.7;
}

.amk-hero__kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-orange-deep);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.amk-hero__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 8px 0 6px;
  text-wrap: balance;
}

.amk-hero__body {
  font-size: 14px;
  color: var(--amk-ink-2);
  line-height: 1.5;
  max-width: 36ch;
}

/* Install gate — full-screen wall when running outside standalone PWA. */

.amk-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.amk-gate__card {
  max-width: 360px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--amk-shadow-card);
}
.amk-gate__icon {
  width: 56px; height: 56px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.amk-gate__icon [data-lucide], .amk-gate__icon svg { width: 26px; height: 26px; }
.amk-gate__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}
.amk-gate__body {
  font-size: 13.5px;
  color: var(--amk-ink-2);
  line-height: 1.5;
  margin: 0 0 18px;
}
.amk-gate__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--amk-orange);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px var(--amk-orange-deep);
}
.amk-gate__btn [data-lucide], .amk-gate__btn svg { width: 16px; height: 16px; }
.amk-gate__btn:active { transform: translateY(1px); }
.amk-gate__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--amk-cream-2, var(--amk-orange-soft));
  color: var(--amk-orange-ink);
  font-size: 12.5px;
  line-height: 1.4;
}
.amk-gate__hint [data-lucide], .amk-gate__hint svg { width: 14px; height: 14px; }

/* Quota strip — daily scans left + pack credits, taps through to credits screen */

.amk-quota {
  position: relative;
  width: 100%;
  padding: 12px 16px 10px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  box-shadow: var(--amk-shadow-card);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  color: inherit;
  transition: transform 0.08s, box-shadow 0.18s;
}
.amk-quota:hover { box-shadow: var(--amk-shadow-pop); transform: translateY(-1px); }
.amk-quota:active { transform: translateY(0); }

/* Quota card — two sections divided by a hairline:
   1. Daily (title + premium chip, ring + caption)
   2. Credits (count + Get more pill button) */
.amk-quota__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.amk-quota__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--amk-ink);
  letter-spacing: -0.1px;
}
.amk-quota__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.amk-quota__caption {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--amk-ink-3);
  line-height: 1.35;
}
.amk-quota__divider {
  height: 1px;
  background: var(--amk-hairline);
  margin: 6px 0 4px;
}
.amk-quota__buyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.amk-quota__credits {
  font-size: 12.5px;
  color: var(--amk-ink-2);
  font-weight: 500;
}
/* Get-more is a proper pill button — icon + label form one rigid unit so the
   chevron cannot drift relative to the text. */
.amk-quota__buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange-soft);
  color: var(--amk-orange-deep);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.amk-quota__buy svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Compact daily-quota ring. */
.amk-quota__ring {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.amk-quota__ring svg { display: block; overflow: visible; }
.amk-quota__ring-bg { stroke: var(--amk-bg-deep); }
.amk-quota__ring-fg {
  stroke: var(--amk-orange);
  transition: stroke-dasharray 0.4s cubic-bezier(.2,.7,.3,1);
}
.amk-quota__ring-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.amk-quota__ring-num {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--amk-ink);
  line-height: 1;
}
/* "/ 50" denominator moved out of the ring into the sub-line. */
.amk-quota__of {
  font-variant-numeric: tabular-nums;
  color: var(--amk-ink-2);
}

.amk-quota__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.amk-quota__label {
  font-size: 12px;
  color: var(--amk-ink-3);
  line-height: 1.3;
}
.amk-quota__label strong {
  font-weight: 700;
  color: var(--amk-ink-2);
}

.amk-quota__premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-orange) 0%, var(--amk-orange-deep) 100%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.amk-quota__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--amk-r-pill);
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  animation: amk-pulse-dot 2.4s ease-in-out infinite;
}

.amk-quota__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.amk-quota__sub {
  font-size: 12px;
  color: var(--amk-ink-3);
}

.amk-quota__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amk-orange-deep);
  white-space: nowrap;
}
/* Chevron sits flush with the cta text — was floating because its inline-block
   SVG baselined to the wrap line, not the text mid-height. */
.amk-quota__cta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Hero drop zone — the primary action of the entire app. Warm orange
   gradient base, animated radial blob drifts inside, deeper border, soft
   elevation. Hover lifts and intensifies. */
.amk-drop {
  position: relative;
  background: linear-gradient(180deg, var(--amk-surface) 0%, var(--amk-orange-soft) 100%);
  border: 1.5px solid color-mix(in srgb, var(--amk-orange) 28%, transparent);
  border-radius: 22px;
  padding: 38px 16px 32px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
  box-shadow:
    0 18px 32px -18px color-mix(in srgb, var(--amk-orange) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Slow-rotating angled gradient. Pseudo is a centered square sized to twice
   the parent's WIDTH (via aspect-ratio:1) so corner coverage holds at every
   rotation angle regardless of the parent's aspect ratio. */
.amk-drop::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  aspect-ratio: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--amk-orange) 85%, transparent) 0%,
    color-mix(in srgb, var(--amk-orange) 55%, transparent) 20%,
    transparent 40%,
    transparent 60%,
    color-mix(in srgb, var(--amk-orange-deep) 75%, transparent) 80%,
    var(--amk-orange-deep) 100%);
  pointer-events: none;
  z-index: 0;
  animation: amk-drop-rotate 16s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes amk-drop-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.amk-drop > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .amk-drop::before { animation: none; }
}
.amk-drop:hover {
  transform: translateY(-2px);
  border-color: var(--amk-orange);
  box-shadow:
    0 22px 38px -16px color-mix(in srgb, var(--amk-orange) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.amk-drop:active { transform: translateY(0); }

.amk-drop--has-file {
  padding: 0;
  border: 1px solid var(--amk-hairline);
  background: var(--amk-surface);
  cursor: default;
  box-shadow: var(--amk-shadow-card);
}
.amk-drop--has-file:hover { transform: none; box-shadow: var(--amk-shadow-card); }
/* Disable the blob inside has-file — the photo preview is the visual focus. */
.amk-drop--has-file::before { display: none; }

.amk-drop__icon {
  width: 64px; height: 64px;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-orange) 0%, var(--amk-orange-deep) 100%);
  color: #fff;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 10px 22px -8px color-mix(in srgb, var(--amk-orange) 65%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.amk-drop__icon svg { width: 30px; height: 30px; }

.amk-drop__title {
  font-family: var(--amk-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--amk-ink);
}

.amk-drop__sub {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 6px;
  opacity: 0.85;
}

.amk-drop__preview {
  width: 100%;
  display: block;
  max-height: 380px;
  object-fit: contain;
  background: #0B0C0A;
}

.amk-drop__chip {
  position: absolute;
  top: 12px; right: 12px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
  background: linear-gradient(135deg, var(--amk-orange) 0%, var(--amk-orange-deep) 100%);
  color: #fff;
  border-radius: var(--amk-r-pill);
  box-shadow:
    0 8px 20px -8px color-mix(in srgb, var(--amk-orange) 65%, transparent),
    0 2px 6px rgba(20, 14, 6, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.amk-drop__chip:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--amk-orange) 75%, transparent), 0 2px 6px rgba(20,14,6,0.3); }
.amk-drop__chip:active { transform: translateY(0); }

/* Scan CTA fused to the bottom of the uploaded preview — replaces the
   floating FAB above the tab bar for a calmer composition. */
.amk-drop__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-top: 1px solid var(--amk-hairline);
  background: var(--amk-orange);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 160ms ease, transform 100ms ease;
}
.amk-drop__cta:hover {
  background: color-mix(in srgb, var(--amk-orange) 88%, #fff);
}
.amk-drop__cta:active { transform: scale(0.995); }
.amk-drop__cta i, .amk-drop__cta [data-lucide] { width: 18px; height: 18px; stroke-width: 2.2; }

/* Buttons */

.amk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 0 22px;
  border: none;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.18s, background 0.18s;
  font-family: inherit;
}

.amk-btn:hover { background: var(--amk-orange-deep); }
.amk-btn:active { transform: scale(0.98); }
.amk-btn:disabled { background: var(--amk-ink-3); cursor: default; }

.amk-btn--ghost {
  background: var(--amk-surface);
  color: var(--amk-ink);
  border: 1px solid var(--amk-hairline);
  height: 48px;
}
.amk-btn--ghost:hover { background: var(--amk-surface-alt); }

.amk-btn--full { width: 100%; }

/* Pinned-to-bottom CTA — used by the upload screen so a tall image preview
   doesn't push the scan button below the fold. */
.amk-btn--sticky {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  margin-top: auto;
  box-shadow: 0 14px 28px -10px rgba(31, 26, 18, 0.35);
}

.amk-btn-row { display: flex; gap: 8px; padding: 0 16px; margin-top: 14px; }
.amk-btn-row .amk-btn { flex: 1; }

/* Spinner */

.amk-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: amk-spin 0.7s linear infinite;
}
@keyframes amk-spin { to { transform: rotate(360deg); } }

/* Errors */

.amk-error {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--amk-harm-soft);
  border: 1px solid color-mix(in srgb, var(--amk-harm) 30%, transparent);
  border-radius: var(--amk-r-chip);
  color: var(--amk-harm-ink);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Result screen */

.amk-result { padding: 24px 16px; }

.amk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px;
  padding: 6px 12px 6px 8px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--amk-ink-2);
  cursor: pointer;
}

.amk-back:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }

.amk-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  color: var(--amk-ink-2);
  cursor: pointer;
  flex-shrink: 0;
}

.amk-share:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }
.amk-share:active { transform: scale(0.96); }

.amk-product {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--amk-shadow-card);
}

.amk-product__head { display: flex; gap: 14px; align-items: flex-start; }

.amk-product__thumb {
  width: 64px; height: 80px;
  flex-shrink: 0;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--amk-surface-alt) 0, var(--amk-surface-alt) 6px, var(--amk-bg-deep) 6px, var(--amk-bg-deep) 12px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--amk-font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amk-ink-3);
  text-align: center;
  padding: 4px;
}

.amk-product__brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.amk-product__name {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 4px 0 0;
  text-wrap: balance;
}

.amk-product__size {
  font-size: 12px;
  color: var(--amk-ink-2);
  margin-top: 4px;
  font-family: var(--amk-font-mono);
}

/* Confidence bar */

.amk-confidence {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  box-shadow: var(--amk-shadow-card);
}

.amk-confidence__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.amk-confidence__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--amk-ink-3);
}

.amk-confidence__value {
  font-family: var(--amk-font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--amk-ink);
}

.amk-confidence__bar {
  height: 6px;
  background: var(--amk-bg-deep);
  border-radius: var(--amk-r-pill);
  overflow: hidden;
  position: relative;
}

.amk-confidence__fill {
  height: 100%;
  border-radius: var(--amk-r-pill);
  transition: width 0.4s cubic-bezier(.2,.7,.3,1), background 0.2s;
}

.amk-confidence--high .amk-confidence__value { color: var(--amk-safe-ink); }
.amk-confidence--high .amk-confidence__fill  { background: var(--amk-safe); }

.amk-confidence--mid  .amk-confidence__value { color: var(--amk-caution-ink); }
.amk-confidence--mid  .amk-confidence__fill  { background: var(--amk-caution); }

.amk-confidence--low  .amk-confidence__value { color: var(--amk-harm-ink); }
.amk-confidence--low  .amk-confidence__fill  { background: var(--amk-harm); }

.amk-confidence__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--amk-ink-2);
  padding: 10px 12px;
  background: var(--amk-bg-deep);
  border-radius: var(--amk-r-chip);
  border-left: 3px solid;
}

.amk-confidence--mid .amk-confidence__note { border-left-color: var(--amk-caution); background: var(--amk-caution-soft); color: var(--amk-caution-ink); }
.amk-confidence--low .amk-confidence__note { border-left-color: var(--amk-harm); background: var(--amk-harm-soft); color: var(--amk-harm-ink); }

/* Verdict hero */

.amk-verdict {
  border-radius: var(--amk-r-chip);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid;
}

.amk-verdict__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  opacity: 0.8;
}

.amk-verdict__label {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.8px;
  margin-top: 2px;
}

.amk-verdict__summary {
  font-size: 13px;
  margin-top: 7px;
  line-height: 1.45;
  opacity: 0.9;
}

.amk-verdict__icon {
  width: 64px; height: 64px;
  border-radius: var(--amk-r-pill);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
/* Triangle's centroid sits below the SVG center — nudge up for optical balance. */
.amk-verdict--caution .amk-verdict__icon svg { transform: translateY(-3px); }

.amk-verdict--avoid    { background: var(--amk-harm-soft);    color: var(--amk-harm-ink);    border-color: color-mix(in srgb, var(--amk-harm) 24%, transparent); }
.amk-verdict--avoid    .amk-verdict__icon { background: var(--amk-harm); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-harm) 36%, transparent); }
.amk-verdict--caution  { background: var(--amk-caution-soft); color: var(--amk-caution-ink); border-color: color-mix(in srgb, var(--amk-caution) 24%, transparent); }
.amk-verdict--caution  .amk-verdict__icon { background: var(--amk-caution); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-caution) 36%, transparent); }
.amk-verdict--safe     { background: var(--amk-safe-soft);    color: var(--amk-safe-ink);    border-color: color-mix(in srgb, var(--amk-safe) 24%, transparent); }
.amk-verdict--safe     .amk-verdict__icon { background: var(--amk-safe); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-safe) 36%, transparent); }
.amk-verdict--unknown  { background: var(--amk-unknown-soft); color: var(--amk-unknown-ink); border-color: color-mix(in srgb, var(--amk-unknown) 24%, transparent); }
.amk-verdict--unknown  .amk-verdict__icon { background: var(--amk-unknown); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-unknown) 36%, transparent); }

/* Mark chips (halal / bpom) */

.amk-marks { display: flex; gap: 8px; }

.amk-mark {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--amk-r-chip);
  border: 1px solid;
  font-size: 11px;
}

.amk-mark__icon { flex-shrink: 0; display: flex; }

.amk-mark__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.amk-mark__sub {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 1px;
  font-family: var(--amk-font-mono);
}

.amk-mark--halal {
  background: var(--amk-safe-soft);
  border-color: color-mix(in srgb, var(--amk-safe) 24%, transparent);
  color: var(--amk-safe-ink);
}

.amk-mark--bpom {
  background: var(--amk-orange-soft);
  border-color: color-mix(in srgb, var(--amk-orange) 24%, transparent);
  color: var(--amk-orange-deep);
}

/* Counts ribbon */

.amk-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.amk-count {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.amk-count__num {
  font-family: var(--amk-font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--amk-ink);
  line-height: 1.1;
}

.amk-count__label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Severity tints — soft pastel bg + matching border + subtle colored glow.
   Empty counts (0) are muted so the ribbon doesn't shout when nothing matches. */
.amk-count--safe {
  background: var(--amk-safe-soft);
  border-color: color-mix(in srgb, var(--amk-safe) 26%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--amk-safe) 55%, transparent);
}
.amk-count--safe .amk-count__num   { color: var(--amk-safe-ink); }
.amk-count--safe .amk-count__label { color: var(--amk-safe-ink); opacity: 0.78; }

.amk-count--caution {
  background: var(--amk-caution-soft);
  border-color: color-mix(in srgb, var(--amk-caution) 26%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--amk-caution) 55%, transparent);
}
.amk-count--caution .amk-count__num   { color: var(--amk-caution-ink); }
.amk-count--caution .amk-count__label { color: var(--amk-caution-ink); opacity: 0.78; }

.amk-count--avoid {
  background: var(--amk-harm-soft);
  border-color: color-mix(in srgb, var(--amk-harm) 26%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--amk-harm) 55%, transparent);
}
.amk-count--avoid .amk-count__num   { color: var(--amk-harm-ink); }
.amk-count--avoid .amk-count__label { color: var(--amk-harm-ink); opacity: 0.78; }

.amk-count--unknown {
  background: var(--amk-unknown-soft);
  border-color: color-mix(in srgb, var(--amk-unknown) 30%, transparent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--amk-unknown) 50%, transparent);
}
.amk-count--unknown .amk-count__num   { color: var(--amk-unknown-ink); }
.amk-count--unknown .amk-count__label { color: var(--amk-unknown-ink); opacity: 0.78; }

/* Empty counts: drop the glow + desaturate the tint so they feel resting. */
.amk-count--empty {
  background: var(--amk-surface);
  border-color: var(--amk-hairline);
  box-shadow: none;
}
.amk-count--empty .amk-count__num   { color: var(--amk-ink-3); opacity: 0.5; }
.amk-count--empty .amk-count__label { color: var(--amk-ink-3); opacity: 0.5; }

/* Status dot — used in counts + ingredient rows */

.amk-dot {
  width: 9px; height: 9px;
  border-radius: var(--amk-r-pill);
  flex-shrink: 0;
}
.amk-dot--avoid   { background: var(--amk-harm); }
.amk-dot--caution { background: var(--amk-caution); }
.amk-dot--safe    { background: var(--amk-safe); }
.amk-dot--unknown { background: var(--amk-unknown); }

/* Section title */

.amk-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 10px;
  margin-top: 18px;
}

.amk-section-title h2 {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin: 0;
}

.amk-section-title__meta {
  font-family: var(--amk-font-mono);
  font-size: 11px;
  color: var(--amk-ink-3);
}

.amk-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange);
  color: #fff;
  font-family: var(--amk-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Findings + ingredient cards */

.amk-card {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  overflow: hidden;
}

.amk-card + .amk-card { margin-top: 10px; }

.amk-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--amk-hairline);
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  align-items: flex-start;
}

.amk-row:first-child { border-top: 0; }

.amk-row__swatch {
  width: 6px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: stretch;
}
.amk-row__swatch--avoid   { background: var(--amk-harm); }
.amk-row__swatch--caution { background: var(--amk-caution); }
.amk-row__swatch--safe    { background: var(--amk-safe); }
.amk-row__swatch--unknown { background: var(--amk-unknown); }

.amk-row__body { flex: 1; min-width: 0; }

.amk-row__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}

.amk-row__tier {
  font-size: 11px;
  font-weight: 600;
  color: var(--amk-ink-3);
  font-family: var(--amk-font-mono);
}

.amk-row__authority {
  font-size: 11px;
  color: var(--amk-ink-3);
  margin-top: 3px;
  letter-spacing: 0.2px;
}

.amk-row__advisory {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 5px;
  line-height: 1.45;
}

.amk-row__ings {
  font-size: 11px;
  color: var(--amk-ink-3);
  margin-top: 5px;
  font-family: var(--amk-font-mono);
}

.amk-row__chev {
  color: var(--amk-ink-3);
  flex-shrink: 0;
  padding-top: 2px;
  transition: transform 0.18s ease;
}

.amk-row[aria-expanded="true"] .amk-row__chev { transform: rotate(180deg); }

/* Ingredient row */

.amk-ing {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--amk-hairline);
  align-items: flex-start;
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
}
.amk-ing:first-child { border-top: 0; }

.amk-ing__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 1.3;
}

.amk-ing__why {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 3px;
  line-height: 1.4;
}

.amk-ing__detail-wrap {
  padding: 0 16px 16px 36px;
  display: none;
  flex-direction: column;
  gap: 12px;
}

.amk-row[aria-expanded="true"] + .amk-ing__detail-wrap,
.amk-ing[aria-expanded="true"] + .amk-ing__detail-wrap {
  display: flex;
}

.amk-ing__detail {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--amk-ink);
  background: var(--amk-surface-alt);
  padding: 12px 14px;
  border-radius: var(--amk-r-chip);
  border-left: 3px solid;
  text-wrap: pretty;
}
.amk-ing__detail--avoid   { border-left-color: var(--amk-harm); background: var(--amk-harm-soft); }
.amk-ing__detail--caution { border-left-color: var(--amk-caution); background: var(--amk-caution-soft); }
.amk-ing__detail--safe    { border-left-color: var(--amk-safe); background: var(--amk-safe-soft); }
.amk-ing__detail--unknown { border-left-color: var(--amk-unknown); background: var(--amk-unknown-soft); }

.amk-ing__dose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: var(--amk-surface-alt);
  border-radius: 10px;
  font-size: 12px;
  color: var(--amk-ink-2);
}

.amk-ing__dose-val {
  font-family: var(--amk-font-mono);
  font-weight: 700;
  color: var(--amk-ink);
}

.amk-ing__regs-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.amk-ing__regs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.amk-reg {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: 8px;
  padding: 8px 10px;
}

.amk-reg__k {
  font-size: 10px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.4px;
}

.amk-reg__v {
  font-family: var(--amk-font-mono);
  font-size: 12px;
  color: var(--amk-ink);
  margin-top: 2px;
  line-height: 1.2;
  word-break: break-word;
}

.amk-evidence { display: flex; align-items: center; gap: 6px; }

.amk-evidence__bars { display: flex; gap: 2px; }

.amk-evidence__bar {
  width: 12px; height: 4px;
  border-radius: 2px;
  background: var(--amk-hairline-strong);
}
.amk-evidence__bar--on { background: var(--amk-ink); }

.amk-evidence__label {
  font-size: 11px;
  color: var(--amk-ink-2);
  font-weight: 500;
}

/* Meta footer */

.amk-meta {
  margin-top: 22px;
  padding: 14px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--amk-ink-3);
  font-family: var(--amk-font-mono);
  line-height: 1.7;
}

/* Header nav (icon buttons on upload screen — profile + credits) */

.amk-header__nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.amk-iconbtn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  color: var(--amk-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.amk-iconbtn:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }
.amk-iconbtn:active { transform: scale(0.96); }
.amk-iconbtn svg, .amk-iconbtn [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }

/* Profile screen */

.amk-profile__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-orange) 0%, var(--amk-orange-deep) 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Profile identity card — name + premium dot + member-since line + stats row. */

.amk-profile__id { gap: 12px; }

.amk-profile__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange);
  margin-right: 6px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--amk-orange) 60%, transparent);
  animation: amk-pulse-dot 2.4s ease-in-out infinite;
  vertical-align: 1px;
}

.amk-profile__sub {
  font-size: 12px;
  color: var(--amk-ink-2);
  margin-top: 4px;
}

.amk-profile__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--amk-hairline);
  margin-top: 4px;
}

.amk-profile__stat {
  text-align: center;
  padding: 6px 4px;
}

.amk-profile__stat-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--amk-ink);
  font-variant-numeric: tabular-nums;
}

.amk-profile__stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.amk-profile__stat--muted .amk-profile__stat-num { color: var(--amk-ink-2); }

.amk-profile__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}

.amk-profile__lang {
  padding: 8px 14px;
  border-radius: var(--amk-r-pill);
  border: 1px solid var(--amk-hairline-strong);
  background: var(--amk-surface-alt);
  color: var(--amk-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.amk-profile__lang--on {
  background: var(--amk-orange-soft);
  border-color: var(--amk-orange);
  color: var(--amk-orange-deep);
}

.amk-profile__allergens { padding-bottom: 0; }
.amk-profile__hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--amk-ink-3);
  padding: 14px 14px 6px;
}

.amk-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 14px;
}

.amk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 12px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange-soft);
  border: 1px solid color-mix(in srgb, var(--amk-orange) 30%, transparent);
  color: var(--amk-orange-deep);
  font-size: 13px;
  font-weight: 500;
}

.amk-chip__x {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--amk-r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  flex-shrink: 0;
}
.amk-chip__x:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.amk-chip__x svg, .amk-chip__x [data-lucide] { width: 13px; height: 13px; stroke-width: 2.4; }

.amk-profile__add {
  display: flex;
  gap: 6px;
  padding: 0 14px 14px;
}

.amk-profile__add-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--amk-r-pill);
  border: 1px solid var(--amk-hairline-strong);
  background: var(--amk-surface);
  font: inherit;
  font-size: 13px;
}
.amk-profile__add-input:focus { outline: none; border-color: var(--amk-orange); }

.amk-profile__add-btn {
  padding: 0 18px;
  border-radius: var(--amk-r-pill);
  border: 0;
  background: var(--amk-ink);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.amk-profile__add-btn:hover { background: #2c251a; }

/* Status & preferences — iOS-style toggle rows */

.amk-profile__toggles { padding: 4px 4px; }

.amk-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--amk-hairline);
  cursor: pointer;
}
.amk-toggle-row:first-child { border-top: 0; }

.amk-toggle-row__text { flex: 1; min-width: 0; }

.amk-toggle-row__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--amk-ink);
  letter-spacing: -0.15px;
}

.amk-toggle-row__sub {
  font-size: 12px;
  color: var(--amk-ink-2);
  margin-top: 2px;
  line-height: 1.4;
}

.amk-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
}

.amk-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.amk-toggle__track {
  position: absolute;
  inset: 0;
  background: #D8D7D2;
  border-radius: var(--amk-r-pill);
  transition: background 0.18s;
}

.amk-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: var(--amk-r-pill);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.18s;
}

.amk-toggle__input:checked + .amk-toggle__track { background: var(--amk-orange); }
.amk-toggle__input:checked + .amk-toggle__track::after { transform: translateX(18px); }
.amk-toggle__input:focus-visible + .amk-toggle__track {
  outline: 2px solid var(--amk-orange);
  outline-offset: 2px;
}

/* Credits screen */

.amk-credits__banner {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--amk-orange-soft) 0%, var(--amk-bg-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--amk-orange) 24%, transparent);
  border-radius: var(--amk-r-card);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.amk-credits__banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--amk-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amk-credits__banner-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--amk-orange-deep);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.amk-credits__banner-body {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 4px;
  line-height: 1.45;
}

.amk-credits__packs { padding: 0; }

.amk-credits__pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--amk-hairline);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, box-shadow 0.12s;
}
.amk-credits__pack:first-child { border-top: 0; }
.amk-credits__pack:hover { background: color-mix(in srgb, var(--amk-orange-soft) 35%, transparent); }
.amk-credits__pack--selected {
  background: var(--amk-orange-soft);
  box-shadow: inset 3px 0 0 var(--amk-orange);
}
.amk-credits__pack--selected:hover {
  background: color-mix(in srgb, var(--amk-orange-soft) 80%, var(--amk-orange) 8%);
}

.amk-credits__pack-radio {
  width: 18px;
  height: 18px;
  border-radius: var(--amk-r-pill);
  border: 1.5px solid var(--amk-hairline-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.12s, background 0.12s;
}
.amk-credits__pack-radio--on {
  border-color: var(--amk-orange);
  background: var(--amk-orange);
}
.amk-credits__pack-radio--on::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: var(--amk-r-pill);
  background: #fff;
}


.amk-credits__pack-num {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
  flex-shrink: 0;
  width: 56px;
}

.amk-credits__pack-mid { flex: 1; min-width: 0; }
.amk-credits__pack-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--amk-ink-2);
}
.amk-credits__pack-per {
  font-size: 11.5px;
  color: var(--amk-ink-3);
  margin-top: 2px;
  font-weight: 500;
}

.amk-credits__pack-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}
.amk-credits__pack-price {
  font-family: var(--amk-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--amk-ink);
}
.amk-credits__pack-once {
  font-size: 10.5px;
  color: var(--amk-ink-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.amk-credits__badge {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* All packs get the same price-column shift so prices line up across rows
   regardless of whether the row carries a badge. */
.amk-credits__pack-price-wrap {
  padding-top: 16px;
  align-self: flex-start;
}
.amk-credits__badge--save    { background: var(--amk-safe); color: #fff; box-shadow: 0 4px 10px -2px rgba(63,166,107,0.35); }

.amk-credits__premium {
  margin-bottom: 30px;
  padding: 22px;
  border-radius: var(--amk-r-card);
  /* Friendly warm wash — cream → soft orange with a subtle hot-corner glow. */
  background:
    radial-gradient(ellipse 320px 220px at 95% 0%, color-mix(in srgb, var(--amk-orange) 32%, transparent) 0%, transparent 65%),
    linear-gradient(135deg, #FFF3E0 0%, var(--amk-orange-soft) 55%, color-mix(in srgb, var(--amk-orange) 30%, #FFE5C7) 100%);
  color: var(--amk-ink);
  border: 1px solid color-mix(in srgb, var(--amk-orange) 22%, transparent);
  box-shadow:
    0 14px 28px -14px color-mix(in srgb, var(--amk-orange) 35%, transparent),
    var(--amk-shadow-card);
  position: relative;
  overflow: hidden;
}

.amk-credits__premium-row { display: flex; align-items: center; gap: 8px; }
.amk-credits__premium-icon {
  color: var(--amk-orange-deep);
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.amk-credits__premium-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-orange-deep);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.amk-credits__premium-active {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--amk-r-pill);
  border: 1px solid color-mix(in srgb, var(--amk-orange) 28%, transparent);
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 500;
  color: var(--amk-ink);
  letter-spacing: 0;
  text-transform: none;
}

.amk-credits__premium-active-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange);
  box-shadow: 0 0 8px color-mix(in srgb, var(--amk-orange) 70%, transparent);
  animation: amk-pulse-dot 2.4s ease-in-out infinite;
}

@keyframes amk-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.amk-credits__premium-price {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.7px;
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
}
.amk-credits__premium-per {
  font-size: 14px;
  font-weight: 500;
  color: var(--amk-ink-3);
  margin-left: 6px;
}

.amk-credits__premium-feats {
  font-size: 12.5px;
  color: var(--amk-ink-2);
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.amk-credits__premium-feats li {
  position: relative;
  padding-left: 16px;
  margin-top: 4px;
}
.amk-credits__premium-feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amk-orange-deep);
  font-weight: 700;
}

.amk-credits__buy {
  margin-top: 14px;
}

.amk-credits__cancel {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  color: var(--amk-ink-3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
}
.amk-credits__cancel:hover {
  border-color: color-mix(in srgb, var(--amk-harm) 40%, transparent);
  color: var(--amk-harm-ink);
  background: color-mix(in srgb, var(--amk-harm-soft) 50%, transparent);
}

/* Toasts */

.amk-toasts {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}

.amk-toast {
  pointer-events: auto;
  background: var(--amk-ink);
  color: #fff;
  border-radius: var(--amk-r-chip);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  max-width: min(90vw, 320px);
  width: auto;
  box-shadow: 0 12px 28px -8px rgba(31, 26, 18, 0.45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.18s, transform 0.18s;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.amk-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.amk-toast__icon svg { width: 18px; height: 18px; }
.amk-toast__text { flex: 1; min-width: 0; }

.amk-toast--in {
  opacity: 1;
  transform: translateY(0);
}

/* Backgrounds use 0.9 alpha via color-mix so a subtle blur of what's behind
   bleeds through (works alongside backdrop-filter on supporting browsers). */
.amk-toast--warn  { background: color-mix(in srgb, var(--amk-caution) 90%, transparent); color: #fff; }
.amk-toast--error { background: color-mix(in srgb, var(--amk-harm)    90%, transparent); color: #fff; }
.amk-toast--info  { background: color-mix(in srgb, var(--amk-orange)  90%, transparent); color: #fff; }

/* 401 screen — shown when ?token is missing or wrong */

.amk-401 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.amk-401__card {
  max-width: 360px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--amk-shadow-card);
}

.amk-401__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-harm-soft);
  color: var(--amk-harm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.amk-401__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}

.amk-401__body {
  font-size: 13.5px;
  color: var(--amk-ink-2);
  line-height: 1.5;
  margin: 0;
}

/* Loading overlay during scan */

.amk-loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(31, 26, 18, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--amk-bg);
}

.amk-loading__pulse {
  width: 80px; height: 80px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-orange);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: amk-pulse 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes amk-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--amk-orange) 45%, transparent); transform: scale(1); }
  60%  { box-shadow: 0 0 0 32px color-mix(in srgb, var(--amk-orange) 0%, transparent);  transform: scale(1.025); }
  100% { box-shadow: 0 0 0 32px color-mix(in srgb, var(--amk-orange) 0%, transparent);  transform: scale(1); }
}

.amk-loading__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
  text-align: center;
  padding: 0 24px;
  /* Reserve two lines of height so longer phrases don't pop the layout. */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amk-loading__title--out {
  opacity: 0;
  transform: translateY(-8px);
}

/* ─────────────────────────────────────────────────────────────
   Phone-frame mockup wrapper. Opt-in via ?demo on the URL —
   app.js adds `body.amk-demo`. Without the flag the app is
   full-bleed (mobile-style) at any viewport.
   ───────────────────────────────────────────────────────────── */

body.amk-demo {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 1100px 700px at 50% -10%, #EFE2C9 0%, transparent 65%),
    radial-gradient(ellipse 900px 900px at 50% 110%, #D9C9AC 0%, transparent 60%),
    var(--amk-bg-deep);
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  /* Always reserve scrollbar space so the centered phone doesn't shift left
     when the page becomes tall enough to need scrolling. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body.amk-demo::before {
  content: '';
  position: fixed;
  inset: 0;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

body.amk-demo .amk-app {
  width: 412px;
  max-width: 412px;
  height: 884px;
  min-height: 884px;
  margin: 0;
  border-radius: 54px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Reserve space for the scrollbar so layout doesn't shift when content
     grows past the phone height. */
  scrollbar-gutter: stable;
  isolation: isolate;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(31, 26, 18, 0.06),
    0 0 0 11px #131008,
    0 0 0 12px rgba(255, 255, 255, 0.04),
    0 60px 80px -20px rgba(40, 28, 12, 0.45),
    0 28px 50px -28px rgba(20, 14, 6, 0.55);
}
body.amk-demo .amk-app::-webkit-scrollbar { display: none; }

body.amk-demo .amk-app::before {
  content: '';
  display: block;
  position: sticky;
  top: 14px;
  margin: 14px auto 0;
  width: 118px;
  height: 32px;
  background: #0A0805;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  z-index: 100;
  pointer-events: none;
}

body.amk-demo .amk-header { padding-top: 56px; }

/* Pad screen content so a short page still visually fills the phone. */
body.amk-demo .amk-upload,
body.amk-demo .amk-result {
  min-height: calc(884px - 56px - 80px);
}

body.amk-demo .amk-loading {
  position: absolute;
  inset: 0;
  border-radius: 54px;
}

/* ─────────────────────────────────────────────────────────────
   App-feel polish: screen slide-in, bottom tab bar, header
   avatar circle, floating-action-button scan CTA. Sticky tab
   bar works in both regular (document scroll) + demo (.amk-app
   scroll) modes because its sticky ancestor resolves to whichever
   element actually scrolls.
   ───────────────────────────────────────────────────────────── */

/* Screen slide-in. Each render wraps the screen body so changing
   screens animates rather than snapping. Pulse + loading overlay
   live outside the wrapper so their animations don't restart. */
@keyframes amk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.amk-screen { display: contents; }
.amk-screen--in > *:not(.amk-header) {
  animation: amk-fade-in 180ms ease-out both;
}

/* Header avatar — replaces the generic user lucide icon, ties the
   home page to the profile-screen identity card. */
.amk-header__avatar {
  width: 34px; height: 34px;
  border-radius: var(--amk-r-pill);
  border: 0;
  background: linear-gradient(135deg, var(--amk-orange) 0%, color-mix(in srgb, var(--amk-orange) 75%, #3A1F08) 100%);
  color: #fff;
  font-family: var(--amk-font);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--amk-orange) 50%, transparent);
}
.amk-header__avatar:hover { transform: scale(1.04); }
.amk-header__avatar:active { transform: scale(0.96); }

/* Bottom tab bar — floating frosted-glass pill. Icon-only at rest;
   active tab gets a soft cream-bg pill behind the icon + an inline
   label that springs in. Modern iOS / Material-3 hybrid. */
.amk-tabbar {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: calc(100% - 32px);
  max-width: 440px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  height: 60px;
  padding: 0 8px;
  background: color-mix(in srgb, #1F1A12 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 999px;
  box-shadow:
    0 18px 36px -14px rgba(20, 14, 6, 0.45),
    0 4px 10px -4px rgba(20, 14, 6, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.amk-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.amk-tab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.amk-tab i, .amk-tab [data-lucide] { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.amk-tab:hover { color: rgba(255, 255, 255, 0.85); }
.amk-tab:active { transform: scale(0.96); }
.amk-tab--active {
  background: var(--amk-orange);
  color: #fff;
  padding: 0 18px;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--amk-orange) 75%, transparent);
}
.amk-tab--active .amk-tab__label {
  max-width: 120px;
  opacity: 1;
}

/* Floating-action button — replaces the full-width sticky scan CTA
   on the upload screen. Pill-shaped, elevated, lives above the tab
   bar via bottom: tab-height + 16px. */
.amk-fab {
  position: sticky;
  bottom: 80px;
  align-self: center;
  margin: 16px auto 0;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-orange) 0%, color-mix(in srgb, var(--amk-orange) 78%, #5C3A1A) 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    0 12px 28px -8px color-mix(in srgb, var(--amk-orange) 55%, transparent),
    0 4px 10px -4px rgba(31, 26, 18, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.amk-fab:hover { transform: translateY(-1px); }
.amk-fab:active { transform: translateY(0) scale(0.98); }
.amk-fab i, .amk-fab [data-lucide] { width: 18px; height: 18px; stroke-width: 2.2; }

/* In demo (phone frame), the floating pill stays floating — the
   phone-frame radii are handled by .amk-app itself. */