/* meetme styles = docs/design/mm.css (approved design, product layer on Invoa tokens + bundle.css) + the additions below. */
/* meetme — product layer on top of Invoa v3 (tokens.css + bundle.css) */
.mm { background: var(--background); color: var(--foreground); font-family: var(--font-ui); font-size: 15px; line-height: 1.45; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }
.mm a { color: var(--brand-primary); text-decoration: none; }
.mm a:hover { color: var(--brand-primary-h); }
.mm-mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }

/* top bar */
.mm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.mm-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--foreground); font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.mm-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-primary); color: var(--brand-on-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mm-top-r { display: flex; align-items: center; gap: 6px; }

/* layout */
.mm-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mm-narrow { width: 100%; max-width: 560px; margin: 0 auto; }
.mm-stack { display: flex; flex-direction: column; }
.mm-row { display: flex; align-items: center; }

/* hero */
.mm-eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--brand-soft); border: 1px solid var(--brand-soft-bd); color: var(--brand-primary); font-size: 12.5px; font-weight: 600; }
.mm-h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 650; letter-spacing: -0.03em; text-wrap: balance; }
.mm-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty; }
.mm-steps { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px 12px; align-items: start; margin: 0; padding: 0; list-style: none; }
.mm-step-n { width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.mm-step-t { font-weight: 600; font-size: 14.5px; }
.mm-step-d { font-size: 13.5px; color: var(--muted-foreground); }

/* form card */
.mm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.mm-form { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.mm-form-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mm-form-t { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.mm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mm-label { font-size: 13px; font-weight: 550; color: var(--foreground); }
.mm-label .opt { font-weight: 400; color: var(--muted-foreground); }
.mm-input, .mm-textarea, .mm-select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--foreground); font: inherit; font-size: 15px; }
.mm-input::placeholder, .mm-textarea::placeholder { color: var(--muted-foreground); }
.mm-input:focus, .mm-textarea:focus, .mm-select:focus { outline: 2px solid var(--ring); outline-offset: -1px; border-color: transparent; }
.mm-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.mm-hint { font-size: 12.5px; color: var(--muted-foreground); }
.mm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mm-grid3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mm-input-ic { position: relative; }
.mm-input-ic > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.mm-input-ic > .mm-input { padding-left: 38px; }
.mm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }
.mm-check input { width: 18px; height: 18px; accent-color: var(--brand-primary); margin: 0; }

/* image drop */
.mm-drop { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-muted); cursor: pointer; }
.mm-drop-ic { width: 44px; height: 44px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); flex: none; }
.mm-drop-t { font-size: 14px; font-weight: 600; }
.mm-drop-d { font-size: 12.5px; color: var(--muted-foreground); }
.mm-thumb { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-sunken); }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* detected platform chip */
.mm-detect { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; height: 28px; padding: 0 10px 0 6px; border-radius: 99px; background: var(--success-bg); border: 1px solid var(--success-bd); color: var(--foreground); font-size: 12.5px; font-weight: 550; }
.mm-detect .ok { color: oklch(0.5 0.13 155); }
.mm-plats { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-plat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 7px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.mm-pl { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex: none; }
.mm-pl.lg { width: 36px; height: 36px; border-radius: 9px; font-size: 15px; }
.pl-meet { background: oklch(0.58 0.14 150); }
.pl-zoom { background: oklch(0.56 0.17 258); }
.pl-teams { background: oklch(0.5 0.13 285); }
.pl-webex { background: oklch(0.5 0.02 260); }
.pl-jitsi { background: oklch(0.55 0.13 235); }
.pl-yt { background: oklch(0.56 0.21 27); }
.pl-tg { background: oklch(0.6 0.12 230); }
.pl-online { background: var(--neutral); }

/* buttons (sizes for touch) */
.mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--foreground); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.mm a.mm-btn { color: var(--foreground); }
.mm-btn:hover { background: var(--surface-muted); }
.mm-btn.primary, .mm a.mm-btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); }
.mm-btn.primary:hover { background: var(--brand-primary-h); }
.mm-btn.soft, .mm a.mm-btn.soft { background: var(--brand-soft); border-color: var(--brand-soft-bd); color: var(--brand-primary); }
.mm-btn.ghost { border-color: transparent; background: transparent; }
.mm-btn.lg { height: 52px; font-size: 16px; padding: 0 20px; border-radius: var(--radius); }
.mm-btn.sm { height: 36px; font-size: 13.5px; padding: 0 12px; }
.mm-btn.icon { width: 44px; padding: 0; }
.mm-btn.block { width: 100%; }

/* event: cover + date tile */
.mm-cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-soft); border: 1px solid var(--brand-soft-bd); }
.mm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-cover-auto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: var(--brand-primary); }
.mm-cover-auto .big { font-family: var(--font-mono); font-size: 64px; line-height: 0.95; font-weight: 650; letter-spacing: -0.04em; }
.mm-cover-auto .mon { font-family: var(--font-mono); font-size: 15px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
.mm-cover-auto .ttl { font-size: 18px; font-weight: 650; color: var(--foreground); max-width: 80%; text-wrap: balance; }
.mm-dtile { width: 56px; flex: none; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; text-align: center; box-shadow: var(--shadow-xs); }
.mm-dtile .m { display: block; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 0; }
.mm-dtile .d { display: block; font-family: var(--font-mono); font-size: 22px; font-weight: 650; padding: 4px 0 5px; letter-spacing: -0.02em; }

.mm-ev-title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.mm-ev-title.xl { font-size: 36px; letter-spacing: -0.025em; }
.mm-meta { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mm-meta li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.mm-meta svg { color: var(--muted-foreground); margin-top: 2px; }
.mm-meta .p { font-weight: 600; }
.mm-meta .s { font-size: 13.5px; color: var(--muted-foreground); }
.mm-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mm-pill.soon { background: var(--brand-soft); color: var(--brand-primary); border: 1px solid var(--brand-soft-bd); }
.mm-pill.live { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bd); }
.mm-pill.live i { width: 7px; height: 7px; border-radius: 99px; background: var(--danger); }
.mm-pill.done { background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral-bd); }

/* add-to-calendar list */
.mm-cal { display: flex; flex-direction: column; gap: 10px; }
.mm-cal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mm-cal-t { font-size: 15px; font-weight: 650; }
.mm-cal-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.mm-cal-i { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; color: var(--foreground); border-top: 1px solid var(--border); font-size: 15px; font-weight: 550; }
.mm a.mm-cal-i { color: var(--foreground); }
.mm-cal-i:first-child { border-top: none; }
.mm-cal-i:hover { background: var(--surface-muted); }
.mm-cal-i .n { flex: 1; min-width: 0; }
.mm-cal-i .s { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted-foreground); }
.mm-cal-i .chev { color: var(--faint-foreground); flex: none; }
.mm-cal-ic { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
.mm-cal-ic.g { color: oklch(0.55 0.15 255); }
.mm-cal-ic.a { color: var(--foreground); }
.mm-cal-ic.o { color: oklch(0.52 0.14 245); }
.mm-cal-ic.y { color: oklch(0.5 0.2 300); }
.mm-cal-i.first { background: var(--brand-soft); }
.mm-cal-i.first .mm-cal-ic { background: var(--surface); border-color: var(--brand-soft-bd); }
.mm-rec { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 11px; font-weight: 650; }

/* join block */
.mm-join { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mm-join .n { flex: 1; min-width: 0; }
.mm-join .t { font-weight: 600; }
.mm-join .u { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-join.live { border-color: var(--danger-bd); background: var(--danger-bg); }

.mm-desc { font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.mm-sec-t { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); }
.mm-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* share */
.mm-share { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mm-share-b { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; min-height: 72px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--foreground); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.mm a.mm-share-b { color: var(--foreground); }
.mm-share-b:hover { background: var(--surface-muted); }
.mm-share-b .ic { width: 32px; height: 32px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-muted); color: var(--foreground); }
.mm-link { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 14px; border-radius: var(--radius); border: 1px solid var(--brand-soft-bd); background: var(--brand-soft); }
.mm-link .u { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--brand-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-copybox { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-muted); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.mm-warn { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--warning-bg); border: 1px solid var(--warning-bd); font-size: 13.5px; }
.mm-warn svg { flex: none; color: oklch(0.52 0.12 75); margin-top: 1px; }
.mm-qr { width: 120px; height: 120px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; padding: 8px; flex: none; }

/* list of my events */
.mm-mine { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mm-mine-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); }
.mm-mine-i:first-child { border-top: none; }

.mm-foot { border-top: 1px solid var(--border); padding: 20px 0 28px; color: var(--muted-foreground); font-size: 13px; }
.mm-foot a { color: var(--muted-foreground); }
.mm-lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.mm-lang a, .mm-lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.mm-lang .on { background: var(--brand-soft); color: var(--brand-primary); }

/* phone frame helpers for mockups */
.mm-phone { width: 390px; overflow: hidden; }

@media (max-width: 860px) {
  .mm-h1 { font-size: 34px; }
  .mm-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm-grid3 > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .mm * { transition: none !important; animation: none !important; } }

/* ===== additions: theme, utilities, real states ===== */

/* dark theme follows the system unless a theme is chosen (data-theme set by theme.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --brand-primary:oklch(0.72 0.115 183);
    --brand-primary-h:oklch(0.77 0.11 183);
    --brand-primary-a:oklch(0.68 0.115 183);
    --brand-on-primary:oklch(0.16 0.02 260);
    --brand-soft:oklch(0.3 0.045 183);
    --brand-soft-bd:oklch(0.4 0.06 183);
    --brand-accent:oklch(0.7 0.11 243);
    --background:oklch(0.185 0.012 260);
    --surface:oklch(0.225 0.013 260);
    --surface-muted:oklch(0.255 0.014 260);
    --surface-sunken:oklch(0.205 0.012 260);
    --foreground:oklch(0.945 0.006 260);
    --muted-foreground:oklch(0.7 0.01 260);
    --faint-foreground:oklch(0.58 0.01 260);
    --border:oklch(0.32 0.012 260);
    --border-strong:oklch(0.4 0.014 260);
    --success:oklch(0.78 0.13 155);
    --success-bg:oklch(0.3 0.06 155);
    --success-bd:oklch(0.42 0.08 155);
    --warning:oklch(0.82 0.13 80);
    --warning-bg:oklch(0.32 0.06 80);
    --warning-bd:oklch(0.45 0.09 80);
    --danger:oklch(0.76 0.16 25);
    --danger-bg:oklch(0.32 0.08 25);
    --danger-bd:oklch(0.45 0.1 25);
    --info:oklch(0.78 0.11 235);
    --info-bg:oklch(0.31 0.05 235);
    --info-bd:oklch(0.43 0.07 235);
    --neutral:oklch(0.72 0.01 260);
    --neutral-bg:oklch(0.28 0.01 260);
    --neutral-bd:oklch(0.4 0.01 260);
    --shadow-xs:0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-sm:0 1px 3px oklch(0 0 0 / 0.4);
    --shadow-md:0 4px 14px oklch(0 0 0 / 0.45);
    --shadow-lg:0 14px 40px oklch(0 0 0 / 0.55);
  }
}

[hidden] { display: none !important; }
html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.mm-page { min-height: 100dvh; display: flex; flex-direction: column; }
.mm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mm-input:focus-visible, .mm-textarea:focus-visible { outline-offset: -1px; }
.mm-center { text-align: center; margin: 0; }
.mm-stack-8 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-stack-10 { display: flex; flex-direction: column; gap: 10px; }
.mm-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.mm-self-start { align-self: flex-start; }
@media (min-width: 860px) { .mm-only-mob { display: none !important; } }
.mm-top { position: sticky; top: 0; z-index: 5; }
.mm-top-r .mm-btn.icon { color: var(--muted-foreground); }
.mm-btn.danger { color: var(--danger); border-color: var(--danger-bd); background: var(--surface); }
.mm-btn.danger:hover { background: var(--danger-bg); }
.mm-btn[disabled] { opacity: .55; cursor: not-allowed; }
.mm-btn:focus-visible { outline-offset: 2px; }
.mm-btn.block { display: flex; }
.mm a.mm-btn.danger { color: var(--danger); }
.mm-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mm-lang a:hover { background: var(--surface-muted); color: var(--foreground); }

/* home */
.mm-home-main { flex: 1; display: flex; flex-wrap: wrap; gap: 48px; padding-top: 56px; padding-bottom: 56px; align-items: flex-start; }
.mm-hero { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.mm-hero-long { display: flex; flex-direction: column; gap: 24px; }
.mm-hero-long .mm-eyebrow { align-self: flex-start; }
.mm-formcard { flex: 0 1 520px; min-width: 0; }
.mm-mine-i .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-mine-i .u { font-size: 12.5px; color: var(--muted-foreground); }
.mm-mine-i .mm-dtile { width: 44px; }
.mm-mine-i .mm-dtile .m { font-size: 9.5px; }
.mm-mine-i .mm-dtile .d { font-size: 17px; padding: 2px 0 3px; }
.mm-mine-i .grow { flex: 1; min-width: 0; }
.mm-detect svg.ok { color: oklch(0.5 0.13 155); }

/* form states */
.mm-form-h .mm-hint:empty { display: none; }
.mm-drop:hover { background: var(--surface-sunken); }
.mm-drop-txt { display: flex; flex-direction: column; min-width: 0; }
.mm-field .mm-input.invalid, .mm-field .mm-textarea.invalid { border-color: var(--danger); }
.mm-err { margin: 0; color: var(--danger); font-size: 12.5px; }
.mm-err:empty { display: none; }
.mm-alert { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger); font-size: 13.5px; }
.mm-thumb-wrap { display: flex; flex-direction: column; gap: 8px; }
.mm-thumb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-grid3.is-allday [data-mm-time] { display: none; }
.mm-grid3.is-allday { grid-template-columns: minmax(0, 1fr); }
.mm-tz-btn { color: var(--muted-foreground); max-width: 100%; }
.mm-tz-btn span { overflow: hidden; text-overflow: ellipsis; }
.mm-submit.is-loading { position: relative; color: transparent; }
.mm-submit.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--brand-on-primary); border-right-color: transparent; animation: mm-spin .7s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-input[type="date"], .mm-input[type="time"] { min-width: 0; }
.mm-detect .mm-pl { margin-right: 0; }

/* event page */
.mm-ev { flex: 1; display: flex; flex-wrap: wrap; gap: 40px; padding-top: 40px; padding-bottom: 56px; align-items: flex-start; }
.mm-ev-article { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.mm-ev-aside { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mm-ev-card { display: flex; flex-direction: column; gap: 16px; }
.mm-ev-head { display: flex; flex-direction: column; gap: 12px; }
.mm-ev-head .mm-pill { align-self: flex-start; }
.mm-org-line { color: var(--muted-foreground); }
.mm-about { display: flex; flex-direction: column; gap: 10px; }
.mm-about .mm-divider { margin-bottom: 14px; }
.mm-cal-h-other { margin-top: 6px; }
.mm-cal-h-other .mm-cal-t { font-size: 14px; }
.mm-cal-i .mm-rec { display: none; }
.mm-cal-i.first .mm-rec { display: inline-flex; }
.mm-cal-i.first .chev { display: none; }
.mm-cal-i .n { font-size: 15px; }
.mm-cal-i[hidden] { display: none; }
.mm-cal-i.first { border-top: none; }
.mm-join-wrap { display: flex; flex-direction: column; gap: 12px; }
.mm-btn.mm-join-big, .mm-join-hint { display: none; }
[data-join-open="1"] .mm-join { border-color: var(--danger-bd); background: var(--danger-bg); }
[data-join-open="1"] .mm-join-btn { display: none; }
[data-join-open="1"] .mm-btn.mm-join-big { display: flex; }
[data-join-open="1"] .mm-join-hint { display: block; }
.mm .mm-when-ended { display: none; }
[data-state="ended"] .mm-when-ended { display: block; }
[data-state="ended"] .mm-btn.mm-when-ended { display: flex; }
[data-state="ended"] .mm-when-active { display: none !important; }
[data-state="ended"] .mm-ev-title { color: var(--muted-foreground); }
.mm-ended-note { margin: 0; color: var(--muted-foreground); }
.mm-ev-share .mm-edit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.mm-pill.live i { animation: mm-pulse 1.6s ease-in-out infinite; }
@keyframes mm-pulse { 50% { opacity: .35; } }
.mm-link .mm-btn.copied { background: var(--success-bg); border-color: var(--success-bd); }
.mm-ev-article > .mm-cover { box-shadow: var(--shadow-sm); }
.mm-mono.s, .mm-meta .s.mm-mono { font-variant-numeric: tabular-nums; }

/* created */
.mm-created { flex: 1; display: flex; flex-direction: column; gap: 20px; padding-top: 28px; padding-bottom: 40px; }
.mm-okdot { width: 44px; height: 44px; border-radius: 99px; background: var(--success-bg); border: 1px solid var(--success-bd); color: oklch(0.5 0.13 155); display: inline-flex; align-items: center; justify-content: center; }
.mm-created-lead { margin: 0; color: var(--muted-foreground); }
.mm-brandtext { color: var(--brand-primary); }
.mm-qr-card { padding: 14px; display: flex; gap: 14px; align-items: center; }
.mm-qr-t { font-weight: 600; }
.mm-warn-body { flex: 1; }
.mm-warn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-warn b { font-weight: 650; }

/* edit / not found / prose */
.mm-edit { flex: 1; padding-top: 24px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.mm-edit .mm-warn { margin: 0; }
.mm-prose { flex: 1; max-width: 640px; padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 14px; }
.mm-prose p { margin: 0; color: var(--muted-foreground); font-size: 16px; line-height: 1.6; }
.mm-notfound { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 72px; padding-bottom: 72px; max-width: 480px; }
.mm-notfound-ic { color: var(--faint-foreground); }
.mm-notfound-t { margin: 0; font-weight: 650; font-size: 16px; }
.mm-notfound-d { margin: 0 0 6px; color: var(--muted-foreground); font-size: 14px; }

/* toast (copy feedback etc.) */
.mm-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; padding: 10px 16px; border-radius: var(--radius); background: var(--foreground); color: var(--background); font-size: 14px; font-weight: 550; box-shadow: var(--shadow-md); }

/* ===== phone layout (<860px): flat flex column, order as in the phone mockups ===== */
@media (max-width: 859.98px) {
  .mm-only-desk { display: none !important; }
  .mm-top { height: 52px; padding: 0 16px; }
  .mm-brand { font-size: 15px; }
  .mm-mark { width: 24px; height: 24px; border-radius: 7px; }
  .mm-mark svg { width: 15px; height: 15px; }
  .mm-wrap { padding: 0 16px; }

  .mm-home-main { flex-direction: column; flex-wrap: nowrap; gap: 18px; padding-top: 20px; padding-bottom: 24px; align-items: stretch; }
  .mm-hero { display: contents; }
  .mm-hero-short { order: 1; display: flex !important; flex-direction: column; gap: 8px; }
  .mm-hero-short .mm-h1 { font-size: 28px; }
  .mm-hero-short .mm-lead { font-size: 15px; }
  .mm-formcard { order: 2; flex: none; }
  .mm-formcard .mm-form { padding: 16px; gap: 16px; }
  .mm-retention { order: 3; display: block !important; }
  .mm-mine-wrap { order: 4; }

  .mm-ev { flex-direction: column; flex-wrap: nowrap; gap: 20px; padding-top: 16px; padding-bottom: 24px; align-items: stretch; }
  .mm-ev-article, .mm-ev-aside, .mm-ev-card { display: contents; }
  .mm-ev .mm-o1 { order: 1; border-radius: 12px; }
  .mm-ev .mm-ev-head { order: 2; gap: 10px; }
  .mm-ev .mm-meta { order: 3; }
  .mm-ev .mm-o4 { order: 4; }
  .mm-ev .mm-o5 { order: 5; }
  [data-join-open="1"] .mm-o5 { order: 3; }
  [data-join-open="1"] .mm-meta { order: 4; }
  [data-join-open="1"] .mm-o4 { order: 5; }
  .mm-ev .mm-o6 { order: 6; }
  .mm-ev .mm-o7 { order: 7; display: flex; flex-direction: column; gap: 12px; }
  .mm-ev-title.xl { font-size: 26px; letter-spacing: -0.02em; }
  .mm-cal-mob { flex-direction: column; }
  .mm-cover-auto { padding: 16px; }
  .mm-cover-auto .big { font-size: 56px; }
  .mm-cover-auto .mon { font-size: 13px; }
  .mm-cover-auto .ttl { font-size: 15px; }
  .mm-foot { padding: 16px 0 20px; }
  .mm-foot-in { flex-direction: column; align-items: stretch; }
  .mm-foot-in .mm-lang { align-self: center; }
  .mm-foot-in > span:not(.mm-lang) { text-align: center; }
  .mm-prose { padding-top: 24px; }
  .mm-created { padding-top: 20px; }
}
@media (min-width: 860px) {
  .mm-ev-card { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
  .mm-join-wrap { gap: 12px; }
  .mm-ev-share { gap: 12px; }
  .mm-ev-share .mm-share { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}