.avatar-menu { position: relative; }

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent, #22304a);
  color: var(--on-accent, #fff);
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.avatar:hover, .avatar[aria-expanded='true'] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #22304a) 22%, transparent); }

.avatar-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--line, #e2dcd3);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
}

.avatar-who { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line, #e2dcd3); }

.avatar-who strong { font-size: 15px; }

.avatar-who span { overflow: hidden; color: var(--muted, #6f6a62); font-size: 13px; text-overflow: ellipsis; }

.avatar-pop a, .avatar-pop button {
  display: block;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text, #1f1d1a);
  font: 500 14px/1.3 var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.avatar-pop a:hover, .avatar-pop button:hover { background: color-mix(in srgb, var(--text, #1f1d1a) 7%, transparent); }

.moment {
  --m-surface: #ffffff;
  --m-text: #1f1d1a;
  --m-muted: #6f6a62;
  --m-line: #e2dcd3;
  --m-accent: #22304a;
  --m-on-accent: #ffffff;
  --m-visual: #f3efe8;
  width: min(1000px, calc(100vw - 32px));
  max-width: none;
  height: min(640px, calc(100dvh - 32px));
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--m-surface);
  color: var(--m-text);
  font: 15px/1.5 var(--font-body);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.35);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .moment {
    --m-surface: #22201d;
    --m-text: #f1ece4;
    --m-muted: #a8a094;
    --m-line: #37332e;
    --m-accent: #efe8dc;
    --m-on-accent: #181715;
    --m-visual: #181715;
  }
}

:root[data-theme='dark'] .moment {
  --m-surface: #22201d;
  --m-text: #f1ece4;
  --m-muted: #a8a094;
  --m-line: #37332e;
  --m-accent: #efe8dc;
  --m-on-accent: #181715;
  --m-visual: #181715;
}

.moment.open { opacity: 1; transform: none; }

.moment::backdrop { background: rgb(20 18 15 / 0.55); backdrop-filter: blur(3px); }

.moment-grid { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }

.moment.has-visual .moment-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.moment-visual { display: none; place-items: center; padding: 40px; background: var(--m-visual); }

.moment.has-visual .moment-visual { display: grid; }

.moment-card { width: min(100%, 300px); border-radius: 3px; overflow: hidden; box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 22px 44px -14px rgb(0 0 0 / 0.4); transform: rotate(-3deg); }

.moment-card svg { display: block; width: 100%; height: auto; }

.moment-fan { position: relative; width: min(100%, 380px); aspect-ratio: 1.15; }

.moment-fan-card { position: absolute; top: 50%; left: 50%; width: 46%; animation: moment-bob 5s ease-in-out infinite; }

.moment-fan-card svg { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 14px 30px -12px rgb(0 0 0 / 0.38); }

.moment-fan-card.fan-0 { transform: translate(-102%, -46%) rotate(-10deg); animation-delay: -1.2s; }

.moment-fan-card.fan-1 { z-index: 1; transform: translate(-50%, -54%); }

.moment-fan-card.fan-2 { transform: translate(2%, -46%) rotate(10deg); animation-delay: -2.6s; }

@media (prefers-reduced-motion: reduce) { .moment-fan-card, .moment-visual .envelope { animation: none; } }

.moment-visual .envelope { width: min(100%, 400px); cursor: default; animation: moment-bob 4s ease-in-out infinite; }

@keyframes moment-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

.moment-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-width: 0; padding: 48px clamp(28px, 5vw, 56px); overflow-y: auto; }

.moment-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 420px; min-width: 0; }

.moment-brand { display: block; width: 28px; height: 28px; margin-bottom: 18px; background: var(--m-text); -webkit-mask: url(/mark.svg) center / contain no-repeat; mask: url(/mark.svg) center / contain no-repeat; }

.moment-kicker { margin: 0; color: var(--m-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.moment-title { margin: 0; font: 400 34px/1.1 var(--font-head); }

.moment-lead { margin: 0; color: var(--m-muted); font-size: 16px; }

.moment-lead strong { color: var(--m-text); }

.moment-benefits { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }

.moment-benefits li { position: relative; padding-left: 30px; font-weight: 500; }

.moment-benefits li::before, .moment-benefits li::after { content: ''; position: absolute; left: 0; top: calc((1lh - 18px) / 2); width: 18px; height: 18px; }

.moment-benefits li::before { border-radius: 50%; background: var(--m-accent); }

.moment-benefits li::after { background: var(--m-on-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.4l2.4 2.3 5.2-5.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.4l2.4 2.3 5.2-5.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

.moment-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin-top: 6px; }

.moment-label { font-size: 13px; font-weight: 600; }

.moment-row { display: flex; gap: 8px; }

.moment-row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: var(--m-surface);
  color: var(--m-text);
  font: inherit;
  font-size: 16px;
}

.moment-row input:focus { outline: 2px solid var(--m-accent); outline-offset: 1px; }

.moment-code { font-size: 24px !important; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

.moment-primary {
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--m-accent);
  color: var(--m-on-accent);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.moment-primary:disabled { opacity: 0.6; cursor: default; }

.moment-dev { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #e2a33b 18%, transparent); font-size: 13px; }

.moment-fine { margin: 0; color: var(--m-muted); font-size: 13px; }

.moment-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--m-muted); font-size: 14px; }

.moment-link { padding: 0; border: 0; background: none; color: var(--m-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.moment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }

.moment-error { min-height: 1.4em; margin: 0; color: #b9432c; font-size: 14px; }

.moment-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--m-muted);
  cursor: pointer;
}

.moment-close:hover { background: color-mix(in srgb, var(--m-text) 8%, transparent); color: var(--m-text); }

.moment-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 760px) {
  .moment { width: 100vw; height: 100dvh; border-radius: 0; }
  .moment.has-visual .moment-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .moment-visual { padding: 56px 28px 24px; }
  .moment-visual .envelope { width: min(72vw, 280px); }
  .moment-card { width: min(40vw, 160px); }
  .moment-fan { width: min(78vw, 300px); }
  .moment-panel { align-content: start; padding: 24px 22px 32px; }
  .moment-title { font-size: 28px; }
  .moment-row { flex-direction: column; }
  .moment-row input { flex: none; height: 52px; }
  .moment-row .moment-primary { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .moment { transition: none; }
  .moment-visual .envelope { animation: none; }
}