/* Upgrade moments (new_ui): js/views/upgrade-ui.js */
body.new-ui .upg-back {
  position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px;
  background: rgba(14, 15, 17, .38);
}
body.new-ui .upg-back[hidden] { display: none; }
body.new-ui .upg {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 28px; border-radius: 14px; background: var(--ui-card); color: var(--ui-ink);
  border: 1px solid var(--ui-line); box-shadow: 0 12px 40px rgba(14, 15, 17, .16); font-family: var(--ui-font);
}
body.new-ui .upg-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--ui-ink-2); cursor: pointer;
}
body.new-ui .upg-x:hover { background: var(--ui-hover); }
body.new-ui .upg:focus { outline: none; }
body.new-ui .upg-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.new-ui .upg-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ui-ink-3); }
body.new-ui .upg-k svg, body.new-ui .upg-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
body.new-ui .upg h2 { margin: 10px 0 8px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
body.new-ui .upg > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ui-ink-2); }
body.new-ui .upg-plan { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); }
body.new-ui .upg-plan-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.new-ui .upg-plan-h > b { font-size: 15px; }
body.new-ui .upg-plan-h span { font-size: 13px; color: var(--ui-ink-3); white-space: nowrap; }
body.new-ui .upg-plan-h span b { font-size: 18px; color: var(--ui-ink); font-weight: 600; }
body.new-ui .upg-plan ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
body.new-ui .upg-plan li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.4; color: var(--ui-ink-2); }
body.new-ui .upg-plan li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 5px;
  border: solid var(--ui-ink-2); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg);
}
body.new-ui .upg-plan li:first-child { color: var(--ui-ink); font-weight: 500; }
body.new-ui .upg-note { margin-top: 16px !important; font-size: 13.5px !important; }
body.new-ui .upg-acts { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
body.new-ui .upg-acts .ui-btn { flex: 1 1 100%; justify-content: center; }
body.new-ui .upg-acts .ui-link { font-size: 13.5px; }

body.new-ui .upg-lock {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); color: var(--ui-ink-2);
}
body.new-ui .upg-lock > div { flex: 1; display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; }
body.new-ui .upg-lock b { color: var(--ui-ink); font-weight: 600; }

@media (max-width: 600px) {
  body.new-ui .upg-back { place-items: end center; padding: 0; }
  body.new-ui .upg { width: 100%; border-radius: 16px 16px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
  body.new-ui .upg-acts .ui-link { min-height: 44px; display: inline-flex; align-items: center; }
  body.new-ui .upg-lock { flex-wrap: wrap; }
  body.new-ui .upg-lock .ui-btn { flex: 1 1 100%; }
}

/* Review fixes: the free way out under the title, then what else stops. */
body.new-ui .upg .upg-fact { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ui-ink-2); }
body.new-ui .upg .upg-free { color: var(--ui-ink); font-weight: 500; }
body.new-ui .upg .upg-cur { margin: 16px 0 -8px; font-size: 13px; color: var(--ui-ink-3); }
body.new-ui .upg-lock > div span + span { color: var(--ui-ink-3); }