/* Lume cabinet /me — app UI (adapted from cabinet mockups). Scoped to .page-me. */

.page-me {
  /* 2026-10-23: Warm ink — approved cabinet palette (mockup lume-cabinet-proposed). */
  --me-accent: #1a6b5c;
  --me-accent-600: #218a76;
  --me-accent-500: #34a892;
  --me-accent-soft: #d8f0e9;
  --me-accent-tint: #f3faf7;
  --me-on-accent: #ffffff;

  --me-drop: #1b6b45;
  --me-drop-bg: #dcf5e8;
  --me-rise: #a16207;
  --me-rise-bg: #fef6e0;
  --me-danger: #b91c1c;
  --me-danger-tint: rgba(185, 28, 28, 0.1);
  --me-danger-line: rgba(185, 28, 28, 0.28);

  --me-bg: #f7f4ef;
  --me-surface: #fffcf8;
  --me-surface-2: #f0ebe3;
  --me-ink: #1a2422;
  --me-ink-2: #4a5552;
  --me-ink-3: #7a8581;
  --me-border: #e8e2d8;
  --me-border-strong: #d6cfc3;

  --me-shadow: 0 1px 2px rgba(26, 36, 34, 0.05);
  --me-shadow-lg: 0 2px 8px rgba(26, 36, 34, 0.1);
  --me-radius: 20px;
  --me-radius-sm: 14px;
  /* 2026-11-03 scale: 31 font sizes and 21 radii folded into these. */
  --me-fs-2xs: 0.68rem;   /* 11px: badges, axis, captions */
  --me-fs-xs: 0.75rem;    /* 12px: helper text, meta */
  --me-fs-sm: 0.82rem;    /* 13px: secondary text, small buttons */
  --me-fs-md: 0.88rem;    /* 14px: body in cards */
  --me-fs-base: 0.95rem;  /* 15px: inputs, primary body */
  --me-fs-lg: 1.05rem;    /* 17px: card headings */
  --me-fs-xl: 1.25rem;    /* 20px: section titles */
  --me-fs-2xl: 1.5rem;    /* 24px: stat numbers */
  --me-fs-3xl: 2rem;      /* 32px: hero price */
  --me-r-xs: 6px;
  --me-r-sm: 8px;
  --me-r-md: 12px;
  --me-r-lg: 16px;
  --me-r-xl: 22px;
  --me-r-pill: 999px;
  --me-grad: linear-gradient(180deg, #e8f3ee 0%, rgba(232, 243, 238, 0) 100%);
  --me-nav-bg: rgba(247, 244, 239, 0.92);
  --me-font: "Manrope", system-ui, -apple-system, sans-serif;
  --me-tabbar-h: 72px;
  /* Sticky nav height (pad 13+13 + 34px iconbtn + border) + notch.
     Overlays start below this so Help/detail titles are not clipped. */
  --me-nav-h: calc(61px + env(safe-area-inset-top, 0px));

  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--me-grad) top / 100% 220px no-repeat, var(--me-bg);
  /* fixed bg attachment + overflow-x:hidden (from style.css) both break
     position:fixed tabbar on iOS — keep scroll-stable background only. */
  background-attachment: scroll;
  color: var(--me-ink);
  font-family: var(--me-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Must be visible — hidden/clip on body/html makes fixed act like absolute on iOS. */
  overflow-x: visible;
}
html:has(body.page-me) {
  overflow-x: visible;
}
body.page-me.me-app-on {
  overscroll-behavior-y: none;
}

.page-me * { box-sizing: border-box; }
.page-me .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Dark / Night — surfaces sit clearly above bg (OLED-friendly, less black-hole).
   Also used inside Telegram Mini App when colorScheme=dark. */
html[data-theme="dark"] .page-me,
html:not([data-theme="light"]) .page-me.me-dark-auto {
  --me-accent: #2dd4bf;
  --me-accent-600: #14b8a6;
  --me-accent-500: #5eead4;
  --me-accent-soft: #1a4a45;
  --me-accent-tint: #143532;
  --me-on-accent: #04211d;

  --me-drop: #34d399;
  --me-drop-bg: #134a3a;
  --me-rise: #fbbf24;
  --me-rise-bg: #4a3a14;
  --me-danger: #f87171;
  --me-danger-tint: rgba(248, 113, 113, 0.14);
  --me-danger-line: rgba(248, 113, 113, 0.4);

  --me-bg: #0c1212;
  --me-surface: #1a2423;
  --me-surface-2: #24302e;
  --me-ink: #e4eceb;
  --me-ink-2: #b0beb9;
  --me-ink-3: #84948e;
  --me-border: #2c3a38;
  --me-border-strong: #3a4a47;

  --me-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --me-shadow-lg: 0 2px 10px rgba(0, 0, 0, 0.45);
  --me-grad: linear-gradient(180deg, #152826 0%, rgba(21, 40, 38, 0) 100%);
  --me-nav-bg: rgba(12, 18, 18, 0.88);
}

/* ── A11y helpers ── */
.me-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 14px;
  background: var(--me-ink);
  color: var(--me-bg);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 10px 0;
}
.me-skip:focus { left: 0; }
.me-live {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Top site nav ── */
/* z-index above .me-detail (60) so Help (?) stays tappable on every screen —
   product detail, notifications, help itself under the bar. Tabbar stays 50. */
.me-nav {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--me-nav-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--me-border);
}
.me-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--me-ink);
  font-weight: 800;
  font-size: var(--me-fs-lg);
  letter-spacing: -0.03em;
}
.me-nav-brand img { width: 28px; height: 28px; border-radius: var(--me-r-sm); }
.me-nav-left { display: flex; align-items: center; gap: 10px; }
.me-nav-right { display: flex; align-items: center; gap: 10px; }
.me-iconbtn--sm { width: 34px; height: 34px; border-radius: var(--me-r-md); position: relative; }
.me-iconbtn--sm .me-ico { width: 18px; height: 18px; }
.me-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--me-r-sm);
  background: var(--me-danger, #e5484d); color: #fff;
  font-size: var(--me-fs-2xs); font-weight: 800; line-height: 16px; text-align: center;
}
.me-lang {
  font-size: var(--me-fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--me-ink-3);
  text-decoration: none;
  padding: 6px 8px;
}
.me-lang:hover { color: var(--me-ink); }

/* ── Layout ── */
.me-page { padding: 12px 16px 24px; }
.me-shell { max-width: 480px; margin: 0 auto; width: 100%; }
@media (min-width: 900px) {
  .me-shell { max-width: 760px; }
}
.me-view[hidden] { display: none; }
/* 2026-10-18: any class that sets `display` beats the UA rule for [hidden] —
   the per-class rules below kept missing one (the nav bell showed on the
   sign-in gate). One rule for the whole page instead. */
.page-me [hidden] { display: none !important; }
/* Signed-in or inside Telegram (set by the inline script in <head>): show a
   spinner instead of flashing the sign-in gate while me.js boots. */
html.me-booting #me-gate { display: none; }
html.me-booting .me-shell::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 30vh auto 0;
  border: 3px solid var(--me-line, rgba(127, 127, 127, 0.25));
  border-top-color: var(--me-accent);
  border-radius: 50%;
  animation: me-spin 0.8s linear infinite;
}
/* Compact top chrome in app mode — more room for content */
body.me-app-on .me-nav {
  padding: 10px 16px;
}
body.me-app-on .me-nav-brand span { font-size: var(--me-fs-base); }

.me-kicker {
  margin: 0 0 4px;
  font-size: var(--me-fs-md);
  font-weight: 600;
  color: var(--me-ink-3);
}
.me-title {
  margin: 0;
  font-size: var(--me-fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--me-ink);
}

/* ── App bar (per view) ── */
.me-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 16px;
}
.me-iconbtn {
  width: 42px;
  height: 42px;
  border-radius: var(--me-r-lg);
  background: var(--me-surface);
  border: 1px solid var(--me-border);
  display: grid;
  place-items: center;
  color: var(--me-ink-2);
  box-shadow: var(--me-shadow);
  cursor: pointer;
  flex: none;
}
.me-iconbtn:hover { color: var(--me-accent); border-color: var(--me-accent-soft); }
.me-iconbtn:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ── Buttons ── */
.me-btn {
  appearance: none;
  border: 1px solid var(--me-border-strong);
  background: var(--me-surface);
  color: var(--me-ink);
  font: inherit;
  font-size: var(--me-fs-md);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--me-r-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.me-btn:hover { border-color: var(--me-accent-soft); background: var(--me-surface-2); }
.me-btn:active { transform: translateY(1px); }
.me-btn:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-btn .me-ico { width: 16px; height: 16px; }
.me-btn--primary {
  background: var(--me-accent);
  border-color: var(--me-accent);
  color: var(--me-on-accent);
  box-shadow: none;
}
.me-btn--primary:hover { background: var(--me-accent-600); border-color: var(--me-accent-600); color: var(--me-on-accent); }
.me-btn--ghost { background: transparent; border-color: transparent; color: var(--me-ink-3); box-shadow: none; }
.me-btn--ghost:hover { color: var(--me-ink); background: var(--me-surface-2); }
.me-btn--danger { color: var(--me-danger); border-color: var(--me-danger-line); background: transparent; box-shadow: none; }
.me-btn--danger:hover { background: var(--me-danger-tint); }
.me-btn--sm { padding: 8px 12px; font-size: var(--me-fs-sm); border-radius: var(--me-r-md); }
.me-btn--block { width: 100%; }
.me-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Gate (logged out) ── */
.me-gate {
  margin-top: 28px;
  padding: 32px 24px 32px;
  background: var(--me-surface);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-xl);
  box-shadow: var(--me-shadow-lg);
  animation: me-rise 0.45s ease both;
}
.me-gate h1 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.me-gate > p[data-me-sub] {
  margin: 0 0 14px;
  color: var(--me-ink-2);
  font-size: var(--me-fs-lg);
  line-height: 1.55;
  max-width: 28rem;
  font-weight: 500;
}
/* Compact “what you get” before sign-in — why the CTAs exist. */
.me-gate-feats {
  margin: 0 0 20px;
  padding: 12px 14px 14px;
  border-radius: var(--me-r-md);
  border: 1px solid var(--me-border);
  background: rgba(20, 184, 166, 0.06);
}
.me-gate-feats-title {
  margin: 0 0 8px;
  font-size: var(--me-fs-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--me-ink-2);
}
.me-gate-feats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.me-gate-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: var(--me-fs-md);
  font-weight: 700;
  line-height: 1.35;
  color: var(--me-ink);
  letter-spacing: -0.01em;
}
.me-gate-feats li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--me-accent, #14b8a6);
  flex: none;
}
.me-gate-deals {
  display: block;
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--me-fs-sm);
  font-weight: 700;
  color: var(--me-ink-2);
  text-decoration: none;
  line-height: 1.35;
}
.me-gate-deals b { color: var(--me-accent, #14b8a6); font-weight: 800; }
.me-gate-deals:hover { color: var(--me-ink); }
.me-gate-actions { margin-bottom: 12px; }
.me-gate-actions .me-btn { width: 100%; }
.me-gate-or {
  margin: 14px 0;
  font-size: var(--me-fs-sm);
  font-weight: 700;
  color: var(--me-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.me-widget { display: flex; justify-content: center; min-height: 44px; }
/* A class with `display` beats the UA rule for [hidden], so hiding these from JS
   silently did nothing — which is why iPhone kept showing both Telegram buttons even
   though preferBotLoginGate() had set hidden on the widget since long before today.
   Same pattern already used above for .me-view / .me-hero / .me-stats. */
.me-widget[hidden] { display: none; }
.me-email-form[hidden] { display: none; }
/* Sign-in options are buttons, not links. Both used to be --ghost (transparent,
   no border) and read as captions under the input — next to the solid blue
   Telegram button they did not look clickable at all. */
.me-google-btn { margin-top: 12px; width: 100%; gap: 10px; }
.me-google-btn .me-g-mark { flex: none; }

/* Email row: the submit sits inside the field. Padding is symmetric so the
   centred placeholder stays optically centred once the button appears. */
.me-email-row { position: relative; }
.me-email-input { width: 100%; text-align: center; padding-left: 46px; padding-right: 46px; }
.me-email-go {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--me-r-md);
  background: var(--me-accent);
  color: var(--me-on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  animation: me-go-in 0.16s ease both;
}
.me-email-go[hidden] { display: none; }
.me-email-go:hover { background: var(--me-accent-600); }
.me-email-go:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-email-go:disabled { opacity: 0.55; cursor: default; }
.me-email-go .me-ico { width: 18px; height: 18px; }
.me-email-go.is-busy .me-ico { animation: me-spin 0.8s linear infinite; }
@keyframes me-go-in { from { opacity: 0; transform: translateY(-50%) scale(0.85); } }
@keyframes me-spin { to { transform: rotate(360deg); } }

/* Three plain facts under the sign-in options. The gate is the first thing a
   new user sees and it was asking for a login without saying what for. */
.me-gate-trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Tuned to keep all three on one line at 375px — a lone orphan on a second
     row reads like something failed to load. */
  gap: 6px 12px;
  font-size: var(--me-fs-xs);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--me-ink-3);
}
.me-gate-trust li { display: inline-flex; align-items: center; gap: 6px; }
.me-gate-trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--me-accent);
  flex: none;
}
.me-gate-note { margin: 20px 0 0; font-size: var(--me-fs-sm); color: var(--me-ink-3); line-height: 1.45; }
.me-gate-note a { color: var(--me-accent); text-decoration: none; font-weight: 600; }
.me-gate-note a:hover { text-decoration: underline; }

/* ── Hero (savings) — compact strip, not a tall card (2026-10-23) ── */
.me-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--me-r-md);
  color: #fff;
  background: linear-gradient(135deg, var(--me-accent) 0%, var(--me-accent-600) 100%);
  box-shadow: 0 4px 14px -8px rgba(26, 107, 92, 0.55);
  animation: me-rise 0.4s ease both;
}
html[data-theme="dark"] .me-hero,
html:not([data-theme="light"]) .page-me.me-dark-auto .me-hero {
  background: linear-gradient(135deg, #0f766e, #0d5850);
  box-shadow: 0 4px 18px -6px rgba(0, 0, 0, 0.55);
}
.me-hero[hidden] { display: none; }
.me-hero::after { display: none; }
.me-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.me-hero-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--me-fs-2xs); font-weight: 600; opacity: 0.9; line-height: 1.2;
  min-width: 0;
}
.me-hero-lbl .me-ico { width: 13px; height: 13px; flex: none; }
.me-hero-big {
  margin: 0; font-size: var(--me-fs-xl); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1; flex: none;
}
.me-hero-sub { margin: 4px 0 0; font-size: var(--me-fs-2xs); opacity: 0.82; line-height: 1.25; }

/* ── Stat chips — compact row: icon+value, then label (2026-10-23) ── */
.me-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 2px; }
.me-stats[hidden] { display: none; }
.me-chip {
  background: var(--me-surface);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 8px 10px;
  box-shadow: var(--me-shadow);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.me-chip:hover { border-color: var(--me-border-strong); }
.me-chip:active { transform: scale(0.97); }
.me-chip:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-chip-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.me-chip-ic {
  width: 22px; height: 22px; border-radius: var(--me-r-xs);
  display: grid; place-items: center; flex: none;
}
.me-chip-ic .me-ico { width: 13px; height: 13px; }
.me-chip.a .me-chip-ic { background: var(--me-accent-tint); color: var(--me-accent); }
.me-chip.b .me-chip-ic { background: var(--me-drop-bg); color: var(--me-drop); }
.me-chip.c .me-chip-ic { background: var(--me-accent-soft); color: var(--me-accent); }
.me-chip-v { font-size: var(--me-fs-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.me-chip-k {
  font-size: var(--me-fs-2xs); color: var(--me-ink-3); font-weight: 600;
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Section head ── */
.me-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.me-sec-head h2 { margin: 0; font-size: var(--me-fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.me-sec-link {
  appearance: none; border: 0; background: transparent; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--me-fs-sm); font-weight: 700; color: var(--me-accent); cursor: pointer; padding: 2px;
}
.me-sec-link .me-ico { width: 13px; height: 13px; }
.me-sec-link:hover { text-decoration: underline; }

/* ── Store badge / pill ── */
.me-store {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--me-fs-2xs); font-weight: 700; color: var(--me-ink-2);
  background: var(--me-surface-2); padding: 2px 8px; border-radius: var(--me-r-xs);
}
.me-store .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--me-accent); flex: none; }
.me-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--me-r-pill); font-size: var(--me-fs-xs); font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.me-pill .me-ico { width: 12px; height: 12px; }
.me-pill.down { background: var(--me-drop-bg); color: var(--me-drop); }
.me-pill.up { background: var(--me-rise-bg); color: var(--me-rise); }
.me-pill.flat { background: var(--me-surface-2); color: var(--me-ink-3); }

/* ── Biggest drops — same 3-col grid as .me-stats (2026-10-23) ── */
.me-home-section[hidden] { display: none; }
.me-drops-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.me-drop-card {
  display: flex; flex-direction: column;
  appearance: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--me-surface); border: 1px solid var(--me-border);
  border-radius: var(--me-r-md); padding: 10px; box-shadow: var(--me-shadow);
  transition: transform 0.12s ease, border-color 0.12s ease;
  min-width: 0;
  width: auto;
}
.me-drop-card:hover { transform: translateY(-2px); border-color: var(--me-border-strong); }
.me-drop-card:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-drop-thumb {
  width: 100%; height: 72px; border-radius: var(--me-r-sm); margin-bottom: 8px;
  object-fit: contain; background: var(--me-surface-2); border: 1px solid var(--me-border);
  flex: none;
}
.me-drop-ph { display: grid; place-items: center; color: var(--me-ink-3); }
/* 2026-08-07: long titles + "64 999 грн79 999 грн" on one line broke cards */
.me-drop-title {
  margin: 0;
  font-size: var(--me-fs-sm); font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; overflow-wrap: anywhere;
  min-height: 2.6em; max-height: 2.6em;
}
.me-drop-price {
  margin-top: auto;
  padding-top: 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0;
}
.me-drop-now {
  font-size: var(--me-fs-base); font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
  overflow-wrap: anywhere; word-break: break-word;
}
.me-was {
  font-size: var(--me-fs-xs); color: var(--me-ink-3); text-decoration: line-through;
  font-weight: 600; line-height: 1.2; margin-left: 0;
  overflow-wrap: anywhere;
}
.me-drop-foot {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;   /* 2026-11-03: three cards at 375 px left the store a lone dot */
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.me-drop-foot .me-pill { order: -1; }
.me-drop-foot .me-store {
  min-width: 0;
  flex: 1 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.me-drop-foot .me-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Close-to-target list ── */
.me-tlist { display: flex; flex-direction: column; gap: 8px; }
.me-trow {
  display: flex; align-items: center; gap: 12px;
  background: var(--me-surface); border: 1px solid var(--me-border);
  border-radius: var(--me-r-lg); padding: 12px 12px; box-shadow: var(--me-shadow);
  appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%;
}
.me-trow:hover { border-color: var(--me-border-strong); }
.me-trow-th { width: 40px; height: 40px; border-radius: var(--me-r-md); flex: none; object-fit: contain; background: var(--me-surface-2); border: 1px solid var(--me-border); }
.me-trow-ph { display: grid; place-items: center; color: var(--me-ink-3); }
.me-trow-mid { flex: 1; min-width: 0; }
.me-trow-t { font-size: var(--me-fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-trow-s { font-size: var(--me-fs-xs); color: var(--me-ink-3); font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.me-progress { height: 5px; border-radius: var(--me-r-pill); background: var(--me-surface-2); margin-top: 8px; overflow: hidden; }
.me-progress i { display: block; height: 100%; border-radius: var(--me-r-pill); background: linear-gradient(90deg, var(--me-accent-500), var(--me-accent)); }
.me-target-note { font-size: var(--me-fs-2xs); color: var(--me-accent); font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.me-target-note .me-ico { width: 11px; height: 11px; }
.me-trow-rt { text-align: right; flex: none; }
.me-trow-p { font-size: var(--me-fs-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.me-trow-p.is-hit { color: var(--me-drop); }

/* ── List (product rows) ── */
.me-toolbar-list {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.me-filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.me-fchip {
  appearance: none; flex: none;
  padding: 8px 12px; border-radius: var(--me-r-pill);
  border: 1.5px solid var(--me-border-strong);
  background: var(--me-surface);
  font: inherit; font-size: var(--me-fs-xs); font-weight: 700;
  color: var(--me-ink-2); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.me-fchip.on {
  border-color: var(--me-accent);
  background: var(--me-accent-tint);
  color: var(--me-accent);
}
.me-fchip:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-sort-row { display: flex; gap: 8px; align-items: center; }
.me-sort-row .me-select { flex: 1; min-width: 0; }
@media (min-width: 900px) {
  .me-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
  .me-list .me-empty { grid-column: 1 / -1; }
}
.me-input {
  appearance: none; width: 100%; min-width: 0;
  padding: 12px 14px; border: 1.5px solid var(--me-border-strong); border-radius: var(--me-r-md);
  background: var(--me-surface); color: var(--me-ink); font: inherit; font-size: var(--me-fs-base); font-weight: 500;
}
.me-input::placeholder { color: var(--me-ink-3); }
.me-input:focus { outline: none; border-color: var(--me-accent); box-shadow: 0 0 0 4px var(--me-accent-tint); }
.me-select { width: 100%; }

.me-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.me-card {
  background: var(--me-surface); border: 1px solid var(--me-border-strong);
  border-radius: var(--me-r-lg); box-shadow: var(--me-shadow); overflow: hidden;
  animation: me-rise 0.35s ease both;
}
.me-card.is-open { border-color: var(--me-accent); }
.me-card-main {
  appearance: none; width: 100%; display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px; border: 0; background: transparent; cursor: pointer; text-align: left;
  font: inherit; color: inherit; transition: background 0.12s ease;
}
.me-card-main:hover, .me-card-main:focus-visible { background: var(--me-surface-2); outline: none; }
.me-card.is-open > .me-card-main { background: transparent; }
.me-card-main img, .me-item-ph {
  width: 52px; height: 52px; border-radius: var(--me-r-md); object-fit: contain;
  background: var(--me-surface-2); border: 1px solid var(--me-border);
}
.me-item-ph { display: grid; place-items: center; color: var(--me-ink-3); }
.me-item-meta { min-width: 0; }
.me-item-title {
  margin: 0 0 6px; font-size: var(--me-fs-md); font-weight: 700; color: var(--me-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.me-item-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.me-tag-target {
  font-size: var(--me-fs-2xs); font-weight: 700; color: var(--me-accent);
  background: var(--me-accent-tint); border: 1px solid var(--me-accent-soft);
  padding: 2px 6px; border-radius: var(--me-r-xs); display: inline-flex; gap: 4px; align-items: center;
  font-variant-numeric: tabular-nums;
}
.me-tag-target .me-ico { width: 10px; height: 10px; }

/* 2026-09-03: preorder / unknown availability. Muted rather than accent —
   these are cautions, not the target-price win the accent colour signals. */
.me-tag-stock {
  font-size: var(--me-fs-2xs); font-weight: 700; color: var(--me-ink-2);
  background: var(--me-surface-2); border: 1px solid var(--me-border-strong);
  padding: 2px 6px; border-radius: var(--me-r-xs); display: inline-flex; gap: 4px;
  align-items: center; white-space: nowrap;
}
/* 2026-08-07: keep price column intrinsic width + nowrap. max-width:42% +
   word-break made "49,99 USD" / "59 грн" stack vertically on desktop. */
.me-item-price {
  text-align: right; white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: none;
}
.me-price {
  font-size: var(--me-fs-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--me-ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.me-price.is-empty { color: var(--me-ink-3); font-weight: 700; font-size: var(--me-fs-md); white-space: nowrap; }
.me-dh-now.is-empty { color: var(--me-ink-3); font-weight: 700; font-size: var(--me-fs-md); white-space: nowrap; }

/* expanded panel */
.me-card-panel { border-top: 1px solid var(--me-border-strong); padding: 14px; background: var(--me-surface-2); }
.me-card-panel[hidden] { display: none; }
.me-toolbar .me-btn,
.me-more-actions .me-btn {
  box-shadow: none;
}
.me-spark-wrap { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-md); padding: 12px; margin-bottom: 12px; }
.me-spark-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.me-spark-lo { font-size: var(--me-fs-xs); color: var(--me-ink-3); font-weight: 600; }
.me-spark { width: 100%; height: 48px; display: block; }
.me-chart-empty { margin: 4px 0 0; color: var(--me-ink-3); font-size: var(--me-fs-sm); font-weight: 600; }
.me-toolbar { display: flex; gap: 8px; align-items: stretch; }
.me-toolbar .me-btn {
  flex: none;
  white-space: nowrap;
  box-shadow: none;
}
.me-toolbar .me-btn--primary {
  flex: 1 1 auto;
  min-width: 0;
}
.me-toolbar .me-btn--icon { flex: none; width: 44px; padding: 10px; }
.me-toolbar .me-btn[data-act="more"] {
  min-width: 4.5rem; /* stable — don't shrink/grow when toggled */
}
.me-toolbar .me-btn[data-act="details"] {
  min-width: 5.25rem;
}

/* Primary "notify on drop" lives on the first screen, big and obvious */
.me-check--lead {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--me-r-md);
  background: var(--me-surface);
  border: 1px solid var(--me-border);
  font-size: var(--me-fs-base);
  cursor: pointer;
}
.me-check--lead input { width: 20px; height: 20px; }

/* Everything advanced tucked under "Ще / More" */
.me-more { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--me-border); }
.me-more[hidden] { display: none; }
.me-more-actions { display: flex; gap: 8px; margin-top: 10px; }
.me-more-actions .me-btn { flex: 1; }
.me-more-actions .me-btn--icon { flex: none; width: 44px; padding: 10px; }
.me-notify-row { display: flex; flex-wrap: wrap; gap: 8px; }
.me-form-slot { margin-top: 12px; }
.me-form-slot:empty { display: none; }

.me-form, .me-confirm { padding: 12px; border-radius: var(--me-r-md); background: var(--me-surface); border: 1px solid var(--me-border); }
.me-form[data-email-form], .me-form[data-pair-form] { display: flex; flex-direction: column; gap: 10px; }
.me-form[data-email-form] .me-btn, .me-form[data-pair-form] .me-btn { align-self: flex-start; }
.me-confirm p { margin: 0 0 10px; font-size: var(--me-fs-md); font-weight: 600; color: var(--me-ink); }
.me-label { display: block; margin-bottom: 8px; font-size: var(--me-fs-sm); font-weight: 700; color: var(--me-ink-2); }
.me-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.me-textarea { resize: vertical; min-height: 64px; margin-bottom: 8px; font-weight: 500; }
.me-form .me-input + .me-input, .me-form .me-textarea + .me-input { margin-bottom: 8px; }
.me-form-msg { margin: 0; padding: 10px 12px; border-radius: var(--me-r-md); background: var(--me-drop-bg); color: var(--me-drop); font-size: var(--me-fs-md); font-weight: 700; }
.me-form-msg--err { background: var(--me-danger-tint); color: var(--me-danger); }
.me-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--me-fs-md); font-weight: 600; }
.me-check input { accent-color: var(--me-accent); width: 17px; height: 17px; }

/* ── Empty states ── */
.me-empty {
  text-align: center; padding: 50px 24px;
  background: var(--me-surface); border: 1px solid var(--me-border);
  border-radius: var(--me-r-xl); box-shadow: var(--me-shadow);
}
.me-empty-art { width: 88px; height: 88px; border-radius: var(--me-r-xl); background: var(--me-accent-tint); color: var(--me-accent); display: grid; place-items: center; margin: 0 auto 20px; }
.me-empty-art .me-ico { width: 40px; height: 40px; stroke-width: 1.8; }
.me-empty h3 { margin: 0; font-size: var(--me-fs-lg); font-weight: 800; color: var(--me-ink); }
.me-empty p { margin: 8px 0 0; font-size: var(--me-fs-md); color: var(--me-ink-3); line-height: 1.5; font-weight: 500; }
.me-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ── Add screen (paste-first, preview, optional target — 2026-10-23) ── */
.me-field { margin-top: 20px; }
.me-field:first-child { margin-top: 4px; }
.me-helper { font-size: var(--me-fs-xs); color: var(--me-ink-3); margin-top: 8px; line-height: 1.5; }
.me-shared-banner {
  background: var(--me-accent-tint); border: 1px solid var(--me-accent-soft); border-radius: var(--me-r-lg);
  padding: 12px 14px; display: flex; gap: 12px; align-items: center; margin-bottom: 4px;
}
.me-shared-banner[hidden] { display: none; }
.me-shared-ic { width: 34px; height: 34px; border-radius: var(--me-r-md); background: var(--me-accent); color: #fff; display: grid; place-items: center; flex: none; }
.me-shared-tx { font-size: var(--me-fs-sm); color: var(--me-ink-2); font-weight: 600; line-height: 1.4; }
.me-shared-tx b { color: var(--me-ink); font-weight: 800; }

.me-paste-hero {
  margin: 8px 0 0; padding: 24px 16px; text-align: center;
  border: 1.5px dashed var(--me-border-strong); border-radius: var(--me-r-xl);
  background: var(--me-surface);
}
.me-paste-hero[hidden] { display: none !important; }
.me-paste-hero-art {
  width: 56px; height: 56px; border-radius: var(--me-r-lg); margin: 0 auto 12px;
  background: var(--me-accent-tint); color: var(--me-accent);
  display: grid; place-items: center;
}
.me-paste-hero-art .me-ico { width: 26px; height: 26px; }
.me-paste-hero h3 { margin: 0; font-size: var(--me-fs-base); font-weight: 800; color: var(--me-ink); }
.me-paste-hero p { margin: 6px 0 14px; font-size: var(--me-fs-sm); color: var(--me-ink-3); font-weight: 600; line-height: 1.4; }
.me-paste-hero .me-btn { width: auto; display: inline-flex; padding-left: 24px; padding-right: 24px; }

.me-url-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--me-surface); border: 1.5px solid var(--me-border-strong);
  border-radius: var(--me-r-lg); padding: 4px 4px 4px 12px;
}
.me-url-box:focus-within {
  border-color: var(--me-accent);
  box-shadow: 0 0 0 4px var(--me-accent-tint);
}
.me-url-box .me-input {
  border: 0; box-shadow: none; padding: 10px 4px; background: transparent; flex: 1; min-width: 0;
}
.me-url-box .me-input:focus { outline: none; box-shadow: none; }
.me-add-paste-in {
  flex: none; appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--me-fs-xs); font-weight: 800; color: var(--me-accent);
  padding: 8px 10px; border-radius: var(--me-r-md); background: var(--me-accent-tint);
}
.me-add-paste-in:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }

.me-add-stores {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 12px 0 0; list-style: none; padding: 0;
}
.me-add-stores li {
  padding: 4px 8px; border-radius: var(--me-r-xs); background: var(--me-surface);
  border: 1px solid var(--me-border); font-size: var(--me-fs-2xs); font-weight: 700; color: var(--me-ink-3);
}

.me-add-alt {
  margin: 14px 0 0; padding: 12px; border-radius: var(--me-r-md);
  background: var(--me-accent-tint); border: 1px solid var(--me-accent-soft);
  font-size: var(--me-fs-xs); color: var(--me-ink-2); font-weight: 600; line-height: 1.4;
}
.me-add-alt[hidden] { display: none !important; }
.me-add-alt b { color: var(--me-ink); font-weight: 800; }
body.me-miniapp .me-add-alt { display: none !important; }

.me-add-preview {
  margin: 14px 0 0; padding: 12px; display: flex; gap: 12px;
  background: var(--me-surface); border: 1px solid var(--me-border);
  border-radius: var(--me-r-lg); box-shadow: var(--me-shadow);
}
.me-add-preview[hidden] { display: none !important; }
.me-add-preview-th {
  width: 64px; height: 64px; border-radius: var(--me-r-md); background: var(--me-surface-2);
  flex: none; display: grid; place-items: center; color: var(--me-ink-3);
  overflow: hidden; border: 1px solid var(--me-border);
}
.me-add-preview-th img { width: 100%; height: 100%; object-fit: contain; }
.me-add-preview-t { font-size: var(--me-fs-sm); font-weight: 700; line-height: 1.3; color: var(--me-ink); }
.me-add-preview-meta { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.me-add-preview-host {
  font-size: var(--me-fs-xs); font-weight: 700; color: var(--me-ink-3);
  word-break: break-all;
}
.me-add-preview.is-skel .me-add-preview-th {
  background: linear-gradient(90deg, var(--me-surface-2), var(--me-border), var(--me-surface-2));
  background-size: 200% 100%;
  animation: me-shimmer 1.1s ease infinite;
}
.me-add-preview.is-skel .me-skel-line {
  height: 10px; border-radius: var(--me-r-xs); background: var(--me-surface-2); margin: 6px 0;
}
@keyframes me-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .me-add-preview.is-skel .me-add-preview-th { animation: none; }
}

.me-add-target[hidden] { display: none !important; }
.me-add-target .me-label em {
  font-style: normal; color: var(--me-ink-3); font-weight: 600;
}

.me-add-cta {
  position: sticky;
  bottom: calc(var(--me-tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 6;
  margin-top: 16px;
  padding-top: 12px;
  padding-bottom: 4px;
  background: linear-gradient(180deg, transparent, var(--me-bg) 28%);
}
.me-add-cta .me-btn--primary {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--me-accent) 28%, transparent);
}
.me-add-cta .me-btn--primary:disabled,
.me-add-cta .me-btn.is-dim:disabled {
  background: var(--me-surface-2);
  border-color: var(--me-border-strong);
  color: var(--me-ink-3);
  box-shadow: none;
  opacity: 1;
  cursor: default;
}
.me-add-cta .me-btn.is-busy::after {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid color-mix(in srgb, var(--me-on-accent) 35%, transparent);
  border-top-color: var(--me-on-accent);
  border-radius: 50%;
  animation: me-spin 0.7s linear infinite;
}

/* ── Archive ── */
.me-saved-banner {
  background: linear-gradient(135deg, var(--me-accent), var(--me-accent-600)); color: #fff;
  border-radius: var(--me-r-xl); padding: 20px; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
  margin-bottom: 4px;
}
html[data-theme="dark"] .me-saved-banner,
html:not([data-theme="light"]) .page-me.me-dark-auto .me-saved-banner {
  background: linear-gradient(135deg, #0f766e, #0d5850);
}
.me-saved-k { font-size: var(--me-fs-sm); opacity: 0.9; font-weight: 600; }
.me-saved-v { font-size: var(--me-fs-3xl); font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.me-saved-m { font-size: var(--me-fs-sm); opacity: 0.85; margin-top: 6px; }
.me-arow {
  background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-lg);
  box-shadow: var(--me-shadow); padding: 12px; display: flex; gap: 12px; align-items: center;
}
.me-arow-thumb { width: 50px; height: 50px; border-radius: var(--me-r-md); flex: none; position: relative; object-fit: contain; background: var(--me-surface-2); border: 1px solid var(--me-border); }
.me-arow-ph { display: grid; place-items: center; color: var(--me-ink-3); }
.me-arow-chk { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--me-drop); color: #fff; display: grid; place-items: center; border: 2px solid var(--me-surface); }
.me-arow-chk .me-ico { width: 11px; height: 11px; stroke-width: 3; }
.me-arow-info { flex: 1; min-width: 0; }
.me-arow-t { font-size: var(--me-fs-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-arow-d { font-size: var(--me-fs-xs); color: var(--me-ink-3); font-weight: 600; margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.me-arow-rt { text-align: right; flex: none; }
.me-arow-p { font-size: var(--me-fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.me-arow-sv { font-size: var(--me-fs-xs); font-weight: 800; color: var(--me-drop); margin-top: 4px; background: var(--me-drop-bg); padding: 2px 8px; border-radius: var(--me-r-xs); font-variant-numeric: tabular-nums; }

/* ── Settings / profile (channels + toggles) ── */
.me-settings { display: flex; flex-direction: column; gap: 12px; }
.me-settings-card { padding: 14px 16px; background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-lg); box-shadow: var(--me-shadow); }
.me-settings-card h3 { margin: 0 0 12px; font-size: var(--me-fs-base); font-weight: 800; }
.me-ident-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.me-ident-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--me-fs-md); font-weight: 600; color: var(--me-ink-2); }
.me-ident-list { gap: 0; }
.me-irow { padding: 10px 0; }
.me-irow + .me-irow { border-top: 1px solid var(--me-border); }
.me-irow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-irow-main strong { color: var(--me-ink); font-weight: 700; }
.me-irow-sub { font-size: var(--me-fs-xs); color: var(--me-ink-3); font-weight: 600; overflow-wrap: anywhere; }
.me-irow .me-btn { flex: none; }
.me-ident-unlink { margin-left: auto; }
.me-chan { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.me-chan + .me-chan { border-top: 1px solid var(--me-border); }
.me-chan-ic { width: 38px; height: 38px; border-radius: var(--me-r-md); display: grid; place-items: center; color: #fff; flex: none; }
.me-chan-nm { flex: 1; min-width: 0; }
.me-chan-a { font-size: var(--me-fs-md); font-weight: 700; }
.me-chan-b { font-size: var(--me-fs-xs); color: var(--me-ink-3); font-weight: 600; margin-top: 2px; }
.me-toggle {
  appearance: none; border: 0; width: 46px; height: 28px; border-radius: var(--me-r-pill); flex: none;
  background: var(--me-border-strong); position: relative; cursor: pointer; transition: background 0.2s;
}
.me-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.me-toggle.on { background: var(--me-accent); }
.me-toggle.on::after { transform: translateX(18px); }
.me-toggle:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-toggle:disabled { opacity: 0.6; cursor: progress; }
/* Profile → notification channels (2026-11-03) */
.me-helper--top { margin: -4px 0 6px; }
.me-ch-item { padding: 6px 0; }
.me-ch-item + .me-ch-item { border-top: 1px solid var(--me-border); }
.me-ch-item .me-chan { padding: 4px 0; }
.me-ch-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 6px 50px; }
.me-ch-form[hidden] { display: none; }
.me-ch-form .me-input { flex: 1 1 180px; min-width: 0; }
.me-ch-form .me-btn { flex: none; }
.me-ch-note { margin: 0 0 6px 50px; }
[data-channels-card] [data-ch-msg] { margin-top: 10px; }
.me-linkbtn { margin: 0 0 4px 50px; padding: 6px 0; background: none; border: 0; color: var(--me-accent); font: inherit; font-size: var(--me-fs-sm); font-weight: 700; cursor: pointer; }
.me-linkbtn:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; border-radius: var(--me-r-xs); }
.me-chan-sum { margin: 0 0 10px; font-size: var(--me-fs-md); color: var(--me-ink-2); line-height: 1.5; }
.me-seg { display: flex; gap: 8px; }
.me-seg .me-opt { flex: 1; appearance: none; padding: 10px; border-radius: var(--me-r-md); border: 1.5px solid var(--me-border-strong); background: transparent; text-align: center; font: inherit; font-size: var(--me-fs-sm); font-weight: 700; color: var(--me-ink-2); cursor: pointer; }
.me-seg .me-opt.on { border-color: var(--me-accent); background: var(--me-accent-tint); color: var(--me-accent); }

/* ── Usage strip ── */
.me-usage { margin-top: 10px; padding: 10px 12px; border-radius: var(--me-r-md); background: var(--me-surface); border: 1px solid var(--me-border); font-size: var(--me-fs-sm); font-weight: 700; color: var(--me-ink-3); }
.me-usage[hidden] { display: none; }
.me-usage.is-warn { border-color: var(--me-rise); background: var(--me-rise-bg); color: var(--me-rise); }

/* ── Digest ── */
.me-digest { margin-top: 24px; }
.me-digest:empty { display: none; }
/* Soft CTA to @lume_deals under the weekly digest — mirrors extension .digest-promo. */
.me-deals-promo {
  display: block;
  margin: 12px 2px 0;
  padding: 12px 14px;
  border-radius: var(--me-r-md);
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.28);
  color: var(--me-ink);
  text-decoration: none;
  font-size: var(--me-fs-sm);
  font-weight: 700;
  line-height: 1.35;
}
.me-deals-promo[hidden] { display: none; }
.me-deals-promo b { color: var(--me-accent, #14b8a6); font-weight: 800; }
.me-deals-promo:hover { border-color: var(--me-accent, #14b8a6); }
.me-section-title { margin: 0 0 12px; font-size: var(--me-fs-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--me-ink); }
.me-digest-panel { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-lg); overflow: hidden; box-shadow: var(--me-shadow); }
.me-digest-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--me-border); font-size: var(--me-fs-md); }
.me-digest-row:last-child { border-bottom: none; }
.me-digest-row a { color: var(--me-ink); text-decoration: none; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-digest-row a:hover { color: var(--me-accent); }
.me-digest-foot { margin: 10px 2px 0; font-size: var(--me-fs-sm); color: var(--me-ink-3); font-weight: 600; }

/* ── Status / errors ── */
.me-status { text-align: center; color: var(--me-ink-3); padding: 40px 12px; font-weight: 600; }
.me-status[hidden] { display: none; }
.me-error { color: var(--me-danger); font-size: var(--me-fs-md); text-align: center; margin: 0 0 12px; font-weight: 600; }
.me-error[hidden] { display: none; }

/* ── Install strip ── */
.me-install { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--me-border-strong); border-radius: var(--me-r-lg); background: var(--me-surface); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.me-install[hidden] { display: none; }
.me-install p { margin: 0; flex: 1 1 160px; font-size: var(--me-fs-sm); color: var(--me-ink-2); line-height: 1.4; font-weight: 500; }

/* Full-screen install coach (grandma-simple) */
.me-isheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 22, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.me-isheet[hidden] { display: none !important; }
body.me-isheet-open { overflow: hidden; }
.me-isheet-card {
  width: 100%;
  max-width: 420px;
  background: var(--me-surface);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-xl);
  padding: 28px 24px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  text-align: center;
  animation: me-slide 0.28s ease both;
}
.me-isheet-logo { margin: 0 auto 14px; }
.me-isheet-logo img {
  display: block;
  margin: 0 auto;
  border-radius: var(--me-r-lg);
  box-shadow: var(--me-shadow);
}
.me-isheet-title {
  margin: 0 0 8px;
  font-size: var(--me-fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--me-ink);
  line-height: 1.25;
}
.me-isheet-sub {
  margin: 0 0 16px;
  font-size: var(--me-fs-base);
  line-height: 1.45;
  color: var(--me-ink-2);
  font-weight: 500;
}
.me-isheet-steps {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.me-isheet-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--me-r-lg);
  background: var(--me-surface-2, var(--me-bg));
  border: 1px solid var(--me-border);
  font-size: var(--me-fs-base);
  font-weight: 600;
  color: var(--me-ink);
  line-height: 1.35;
}
.me-isheet-steps .me-isheet-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--me-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--me-fs-md);
  font-weight: 800;
}
/* Variant picker — shown when one URL sells several options at different
   prices, so the shopper says which one to follow. The list can run to a dozen
   shades, hence the scroll cap. */
.me-variant-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.me-variant-options .me-variant-option {
  width: 100%;
  justify-content: space-between;
  min-height: 46px;
  font-size: var(--me-fs-base);
  text-align: left;
  box-shadow: none;
}
.me-variant-name {
  text-align: left;
}
.me-variant-price {
  flex: none;
  margin-left: 12px;
  color: var(--me-muted, inherit);
  font-variant-numeric: tabular-nums;
}
.me-variant-option--oos {
  opacity: 0.55;
}
.me-isheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.me-isheet-actions .me-btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: var(--me-fs-lg);
  box-shadow: none;
}
.me-btn[hidden],
.me-isheet [hidden],
.me-isheet-actions .me-btn[hidden] {
  display: none !important;
}
@media (min-width: 520px) {
  .me-isheet { align-items: center; }
}

/* ── Bottom tab bar (with center FAB) — always viewport-fixed ── */
.me-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  transform: none;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0;
  min-height: var(--me-tabbar-h);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--me-nav-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--me-border-strong);
  box-shadow: 0 -1px 0 rgba(11, 31, 29, 0.04);
}
.me-tabbar[hidden] { display: none !important; }
.me-tab {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--me-ink-3);
  font-size: var(--me-fs-2xs);
  font-weight: 700;
  padding: 6px 2px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.me-tab .me-ico { width: 22px; height: 22px; }
.me-tab.is-active { color: var(--me-accent); }
.me-tab.is-active .me-ico { stroke-width: 2.4; }
.me-tab:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; border-radius: var(--me-r-sm); }
.me-tab--fab { flex: none; width: 64px; padding: 0; min-height: 0; }
.me-fab {
  width: 52px;
  height: 52px;
  border-radius: var(--me-r-lg);
  background: var(--me-accent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.35);
  transform: translateY(-10px);
  border: 3px solid var(--me-bg);
}
.me-fab .me-ico { width: 24px; height: 24px; stroke-width: 2.6; }
.me-tab--fab:active .me-fab { transform: translateY(-8px); }

/* space so fixed nav never covers content */
body.page-me .me-page { padding-bottom: 40px; }
body.page-me.me-app-on .me-page {
  padding-bottom: calc(var(--me-tabbar-h) + 24px + env(safe-area-inset-bottom, 0px));
}

/* ── Product detail overlay ── */
body.me-detail-open { overflow: hidden; }
/* Below sticky nav (z-index 70): Help (?) stays tappable AND the panel’s own
   back/title row is no longer hidden under the header (2026-08-04). */
.me-detail {
  position: fixed;
  top: var(--me-nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--me-grad) top / 100% 260px no-repeat, var(--me-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  animation: me-slide 0.28s ease both;
}
.me-detail[hidden] { display: none; }
.me-detail-head, .me-detail-body, .me-open-cta {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.me-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--me-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  z-index: 2;
}
.me-back {
  width: 40px; height: 40px; border-radius: var(--me-r-md); flex: none;
  background: var(--me-surface); border: 1px solid var(--me-border);
  display: grid; place-items: center; color: var(--me-ink-2); box-shadow: var(--me-shadow); cursor: pointer;
}
.me-back:focus-visible { outline: 2px solid var(--me-accent); outline-offset: 2px; }
.me-detail-ttl { flex: 1; font-size: var(--me-fs-base); font-weight: 800; text-align: center; padding-right: 40px; }
/* The sticky CTA below floats over whatever sits at the bottom of this
   scroller, so leave it room: two stacked buttons plus its own padding and the
   home-indicator inset it reserves. At 20px the last section — the compare
   button, then the notification rows — ended up underneath the bar. */
.me-detail-body { flex: 1; padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
.me-open-cta {
  position: sticky; bottom: 0;
  padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--me-bg) 34%);
  display: flex; flex-direction: column; gap: 8px;
}
.me-open-cta .me-btn { box-shadow: none; }

.me-dh-card { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-xl); padding: 20px; box-shadow: var(--me-shadow); }
.me-dh-top { display: flex; gap: 14px; align-items: flex-start; }
.me-dh-th { width: 66px; height: 66px; border-radius: var(--me-r-lg); flex: none; object-fit: contain; background: var(--me-surface-2); border: 1px solid var(--me-border); }
.me-dh-ph { display: grid; place-items: center; color: var(--me-ink-3); }
.me-dh-t { font-size: var(--me-fs-base); font-weight: 700; line-height: 1.35; }
.me-dh-price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.me-dh-now { font-size: var(--me-fs-3xl); font-weight: 800; letter-spacing: -0.02em; }
.me-verdict { margin-top: 14px; padding: 10px 12px; border-radius: var(--me-r-md); background: var(--me-surface-2); color: var(--me-ink-2); border: 1px solid var(--me-border); }
.me-verdict-l { font-size: var(--me-fs-base); font-weight: 800; }
.me-verdict-s { font-size: var(--me-fs-sm); font-weight: 600; margin-top: 2px; opacity: 0.85; }
.me-verdict-n { font-size: var(--me-fs-sm); margin-top: 4px; line-height: 1.45; color: var(--me-ink-2); }
.me-verdict--best, .me-verdict--good { background: var(--me-drop-bg); color: var(--me-drop); border-color: transparent; }
.me-verdict--high { background: var(--me-rise-bg); color: var(--me-rise); border-color: transparent; }
.me-verdict--fake { background: color-mix(in srgb, var(--me-danger) 12%, transparent); color: var(--me-danger); border-color: color-mix(in srgb, var(--me-danger) 35%, transparent); }
.me-verdict--thin { color: var(--me-ink-3); font-weight: 600; }
.me-verdict--thin .me-verdict-l { font-weight: 600; }
.me-mnmx { display: flex; gap: 8px; margin-top: 16px; }
/* min-width:0 matters: a flex item defaults to min-width:auto and so refuses to
   shrink below its content. With the longest label ("МАКСИМУМ") setting the
   width, the three boxes came out uneven and the row overflowed the card on a
   320px screen — the last one was clipped mid-price. */
.me-mnmx-box { flex: 1 1 0; min-width: 0; background: var(--me-surface-2); border-radius: var(--me-r-md); padding: 10px 8px; text-align: center; }
.me-mnmx-k { font-size: var(--me-fs-2xs); color: var(--me-ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-mnmx-v { font-size: var(--me-fs-base); font-weight: 800; margin-top: 4px; }
.me-mnmx-box.min .me-mnmx-v { color: var(--me-drop); }
.me-mnmx-box.max .me-mnmx-v { color: var(--me-rise); }
.me-chart-toggle { display: flex; gap: 6px; background: var(--me-surface-2); padding: 4px; border-radius: var(--me-r-md); margin: 16px 0; }
.me-ct { flex: 1; appearance: none; border: 0; background: transparent; font: inherit; padding: 8px; border-radius: var(--me-r-sm); font-size: var(--me-fs-sm); font-weight: 700; color: var(--me-ink-3); text-align: center; cursor: pointer; }
.me-ct.on { background: var(--me-surface); color: var(--me-accent); box-shadow: var(--me-shadow); }
.me-bigchart { min-height: 150px; }
.me-bigchart-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.me-axis { display: flex; justify-content: space-between; font-size: var(--me-fs-2xs); color: var(--me-ink-3); font-weight: 600; margin-top: 6px; }

.me-compare { display: flex; flex-direction: column; gap: 8px; }
.me-crow { display: flex; align-items: center; gap: 12px; background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-md); padding: 12px 12px; text-decoration: none; color: var(--me-ink); }
.me-crow.best { border-color: var(--me-accent); background: var(--me-accent-tint); }
.me-crow-st { flex: 1; font-size: var(--me-fs-md); font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.me-crow-st .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.me-best-tag { font-size: var(--me-fs-2xs); font-weight: 800; color: #fff; background: var(--me-accent); padding: 2px 6px; border-radius: var(--me-r-xs); }
.me-crow-p { font-size: var(--me-fs-base); font-weight: 800; flex: none; }

.me-notif-list { display: flex; flex-direction: column; gap: 8px; }
.me-notif-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--me-surface); border: 1px solid var(--me-border);
  border-radius: var(--me-r-lg); padding: 12px 14px; box-shadow: var(--me-shadow);
  text-align: left; width: 100%; appearance: none; font: inherit; color: var(--me-ink); cursor: pointer;
}
.me-notif-ic {
  width: 36px; height: 36px; border-radius: var(--me-r-md); flex: none;
  display: grid; place-items: center; color: #fff; margin-top: 1px;
}
.me-notif-ic.rise { background: var(--me-rise); }
.me-notif-ic.drop { background: var(--me-drop); }
.me-notif-ic.stock { background: var(--me-accent); }
.me-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Title + timestamp share a row so the date always sits top-right at a fixed
   spot — title wraps under it (up to 2 lines) instead of being clipped or
   pushing the date down when it's long. */
.me-notif-head { display: flex; align-items: baseline; gap: 8px; }
.me-notif-title {
  flex: 1; min-width: 0;
  font-size: var(--me-fs-md); font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.me-notif-time { font-size: var(--me-fs-xs); color: var(--me-ink-3); flex: none; white-space: nowrap; }
.me-notif-sub { font-size: var(--me-fs-sm); color: var(--me-ink-3); }
.me-notif-empty { text-align: center; color: var(--me-ink-3); padding: 40px 0; }

/* Help overlay — same shell as notifications; short how-tos, scannable. */
.me-help-body { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.me-help-sec {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--me-r-lg);
  border: 1px solid var(--me-border);
  background: var(--me-surface);
  box-shadow: var(--me-shadow);
}
.me-help-h {
  margin: 0 0 6px;
  font-size: var(--me-fs-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--me-ink);
}
.me-help-p {
  margin: 0;
  font-size: var(--me-fs-sm);
  line-height: 1.45;
  font-weight: 500;
  color: var(--me-ink-2);
}
.me-help-sec .me-actions { margin-top: 10px; }

.me-channels { display: flex; flex-direction: column; gap: 10px; }
.me-channels .me-chan { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-r-lg); padding: 14px 14px; box-shadow: var(--me-shadow); }
.me-compare .me-btn { margin-top: 4px; }
.me-channels .me-chan + .me-chan { border-top: none; }
.me-toggle[data-disabled="1"] { opacity: 0.55; }

@keyframes me-slide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 600px) { .me-detail { padding-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .me-detail { animation: none; } }

@keyframes me-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .me-gate, .me-hero, .me-card { animation: none; }
  .me-toggle, .me-toggle::after, .me-btn, .me-drop-card { transition: none; }
}

@media (max-width: 480px) {
  .me-title { font-size: var(--me-fs-xl); }
  .me-appbar { margin-bottom: 12px; }
  .me-chip { padding: 8px 8px; }
  .me-card-main { padding: 12px 10px; min-height: 68px; }
  .me-list { gap: 8px; }
}

/* desktop: keep app centered, nav becomes a floating pill */
@media (min-width: 600px) {
  .me-page { padding-left: 20px; padding-right: 20px; }
  .me-tabbar {
    left: 50%;
    right: auto;
    width: min(480px, calc(100% - 40px));
    max-width: 480px;
    transform: translateX(-50%);
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--me-border-strong);
    border-radius: var(--me-r-xl);
    box-shadow: var(--me-shadow-lg);
    padding-bottom: 8px;
  }
  body.page-me.me-app-on .me-page {
    padding-bottom: calc(var(--me-tabbar-h) + 40px);
  }
}
@media (min-width: 900px) {
  .me-tabbar {
    width: min(520px, calc(100% - 40px));
    max-width: 520px;
  }
  .me-detail-head, .me-detail-body, .me-open-cta {
    max-width: 760px;
  }
}

/* Mini App: hide PWA install chrome — Telegram is already the shell. The one
   exception is the banner in Telegram's own home-screen mode (2026-11-09). */
body.me-miniapp .me-install:not([data-mode="tg-home"]),
body.me-miniapp #me-install-sheet {
  display: none !important;
}

/* Gate: email sign-in. Sits under the single Telegram option, deliberately quieter
   than it — Telegram is the path most people here already have. */
.me-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.me-email-form .me-input { width: 100%; }
.me-email-note--error { color: var(--me-danger, #dc2626); }

/* "You will lose this list" prompt. Deliberately the loudest thing on the home
   screen for accounts that have no way back in — 254 of them at the time of writing. */
.me-rescue {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--me-r-lg);
  border: 1px solid var(--me-accent, #14b8a6);
  background: rgba(20, 184, 166, 0.08);
}
.me-rescue[hidden] { display: none; }
.me-rescue-title { margin: 0 0 4px; font-weight: 700; }
.me-rescue-sub { margin: 0 0 10px; font-size: var(--me-fs-md); color: var(--me-ink-2, #9aa); line-height: 1.4; }
.me-rescue-form { display: flex; flex-direction: column; gap: 8px; }
.me-rescue-form .me-input { width: 100%; }

/* ── Extension pairing code (Profile → Connect the browser extension) ── */
/* Digits typed off another screen: wide tracking and a monospace figure so 0/8
   and 1/7 are told apart on the first attempt rather than the third. */
.me-pair-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--me-fs-xl); font-weight: 700; letter-spacing: 0.28em; text-align: center;
}
.me-pair-summary { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.me-pair-summary[hidden] { display: none; }
.me-pair-sum-title { margin: 0; font-size: var(--me-fs-base); font-weight: 800; }
.me-pair-sum-num { margin: 0; font-size: var(--me-fs-lg); font-weight: 700; color: var(--me-ink-2); }
/* The merge is irreversible, so its warning must not read like the ordinary
   confirmations sharing this class. */
.me-form-msg--warn { background: var(--me-rise-bg); color: var(--me-rise); }

/* Merge proposed during sign-in — same summary component as the pairing card,
   but it appears unasked-for on Home, so it needs a frame that says "read me". */
.me-merge {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--me-r-lg);
  border: 1px solid var(--me-rise, #b45309);
  background: var(--me-rise-bg, #fef3c7);
}
.me-merge[hidden] { display: none; }
.me-merge .me-pair-sum-title:first-child { color: var(--me-rise); }
/* The irreversibility line is amber-on-amber inside this banner and all but
   vanishes. Give it the surface colour back so it still reads as the alarm. */
.me-merge .me-form-msg--warn {
  background: var(--me-surface);
  border: 1px solid var(--me-rise);
}

/* Push opt-in prompt. Shares the rescue banner's frame on purpose — same kind of
   thing (a one-off ask that can be dismissed), so it should not look like a new
   species of interruption. */
.me-push-cta[hidden] { display: none; }

/* One-shot Home welcome — same frame as rescue/push, quieter list inside. */
.me-welcome {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--me-r-lg);
  border: 1px solid var(--me-border-strong, #c9d2d4);
  background: var(--me-surface);
  box-shadow: var(--me-shadow);
}
.me-welcome[hidden] { display: none; }
.me-welcome-list {
  margin: 0 0 10px;
  padding: 0 0 0 1.15em;
  font-size: var(--me-fs-md);
  color: var(--me-ink-2);
  line-height: 1.45;
  font-weight: 600;
}
.me-welcome-list li { margin: 0 0 4px; }
.me-welcome-deals {
  margin: 0 0 12px;
  font-size: var(--me-fs-md);
  color: var(--me-ink-2);
  line-height: 1.4;
  font-weight: 600;
}
.me-welcome-deals a {
  color: var(--me-accent, #14b8a6);
  font-weight: 800;
  text-decoration: none;
}
.me-welcome-deals a:hover { text-decoration: underline; }
.me-ident-actions { margin-top: 10px; }
/* The address matters more than the provider name — it is what distinguishes
   two linked accounts of the same kind. Keep it readable, not a faint aside. */
.me-ident-handle { color: var(--me-ink); font-weight: 600; word-break: break-all; }

/* Toast: visible feedback for saves, removals (with Undo) and errors (2026-11-03).
   Sits above the bottom tab bar; inverts with the theme via the ink/surface tokens. */
.me-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px; border-radius: var(--me-r-md);
  background: var(--me-ink); color: var(--me-surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  font-size: var(--me-fs-md); font-weight: 600; line-height: 1.35;
}
.me-toast[hidden] { display: none; }
.me-toast--err { background: var(--me-danger); color: #fff; }
.me-toast-t { padding: 4px 0; }
.me-toast-act {
  flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--me-r-sm);
  background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; font: inherit; font-weight: 800; cursor: pointer;
}
.me-toast-act:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .me-toast:not([hidden]) { animation: me-toast-in 0.18s ease-out; }
  @keyframes me-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* Touch targets (2026-11-03 audit): ~44 px to tap without changing the look.
   Padding grows the box; the toggle gets an invisible hit area around it. */
.me-lang { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.me-gate-deals { padding: 12px 0; margin-top: 2px; }
.me-gate-note a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
.me-sec-link { min-height: 44px; padding: 0 4px; }
.me-toggle { touch-action: manipulation; }
.me-toggle::before { content: ""; position: absolute; inset: -8px -4px; }
.me-empty .me-helper { margin-top: 12px; }
.me-empty .me-helper a { color: var(--me-accent); font-weight: 700; text-decoration: none; display: inline-block; padding: 8px 2px; margin: -8px 0; }