/* MathPuzzle Forge UI fonts, served from this tool (works offline). OFL licences in assets/fonts/ui. */
@font-face { font-family: Geist; src: url(../fonts/ui/geist-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url(../fonts/ui/geist-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url(../fonts/ui/geist-600.woff2) format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(../fonts/ui/instrument-sans-500.woff2) format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(../fonts/ui/instrument-sans-600.woff2) format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }

/* MathPuzzle Forge UI: component styles. Every value comes from tokens.css (tokens.json). */

body { margin: 0; background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-ui); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.mpf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); padding: var(--gap-md); }
.mpf-col { display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--gap-md); }
.mpf-ico { display: inline-block; flex: none; vertical-align: middle; }

/* focus: one ring everywhere */
.mpf-focus:focus-visible, .mpf-btn:focus-visible, .mpf-ibtn:focus-visible, .mpf-tab:focus-visible, .mpf-select__trigger:focus-visible,
.mpf-switch input:focus-visible + .mpf-switch__track, .mpf-card:focus-visible, .mpf-tile:focus-visible, .mpf-upg:focus-visible, .mpf-nav__item:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* ---------- Button ---------- */
.mpf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); box-sizing: border-box; height: 40px;
  padding: 0 var(--gap-md); border: 1px solid transparent; border-radius: var(--radius-btn-standard); cursor: pointer; white-space: nowrap;
  font: 500 14px/1.4 var(--font-ui); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.mpf-btn--sm { height: 32px; padding: 0 var(--gap-sm); border-radius: var(--radius-ui-sm); font-size: 12px; }
.mpf-btn--lg { height: 48px; padding: 0 var(--gap-md); border-radius: var(--radius-ui-lg); font-size: 16px; }
.mpf-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.mpf-btn--primary:hover { background: var(--action-primary-bg-hover); }
.mpf-btn--primary:active { background: var(--action-primary-bg-pressed); }
.mpf-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--action-secondary-border); }
.mpf-btn--secondary:hover { background: var(--iconbutton-bg-hover); }
.mpf-btn--secondary:active { background: var(--iconbutton-bg-pressed); }
.mpf-btn--ghost { background: transparent; color: var(--text-primary); }
.mpf-btn--ghost:hover { background: var(--iconbutton-bg-hover); }
.mpf-btn--tertiary { height: auto; padding: var(--gap-xs) 1.5px; border: 0; border-radius: 0; background: transparent; color: var(--text-primary);
  box-shadow: inset 0 -1px 0 currentColor; }
.mpf-btn--tertiary:hover { color: var(--text-brand); }
.mpf-btn[disabled], .mpf-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--iconbutton-bg); color: var(--text-tertiary); border-color: transparent; box-shadow: none; }
.mpf-btn__arrow { transition: translate var(--duration-fast) var(--ease-standard); }
.mpf-btn:hover .mpf-btn__arrow { translate: 2px 0; }
.mpf-btn:hover .mpf-btn__arrow--diag { translate: 2px -2px; }

/* ---------- IconButton ---------- */
.mpf-ibtn { display: inline-grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--iconbutton-border); border-radius: var(--radius-btn-standard); background: var(--iconbutton-bg); color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-standard); }
.mpf-ibtn--sm { width: 32px; height: 32px; border-radius: var(--radius-ui-sm); }
.mpf-ibtn--lg { width: 48px; height: 48px; border-radius: var(--radius-ui-md); }
.mpf-ibtn:hover { background: var(--iconbutton-bg-hover); }
.mpf-ibtn:active, .mpf-ibtn[aria-pressed="true"] { background: var(--iconbutton-bg-pressed); }
.mpf-ibtn[disabled] { cursor: not-allowed; color: var(--text-tertiary); background: transparent; }
.mpf-ibtn .mpf-ico { transition: translate var(--duration-slow) var(--ease-standard); }
.mpf-ibtn--nudge:hover .mpf-ico { translate: 2px -2px; }

/* ---------- Badge ---------- */
.mpf-badge { display: inline-flex; align-items: center; gap: var(--gap-xxs); padding: 2px var(--gap-xs); border-radius: var(--radius-ui-sm);
  font: 500 12px/1.4 var(--font-ui); white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard); }
.mpf-badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.mpf-badge--info { background: var(--badge-info-bg); color: var(--badge-info-text); }
.mpf-badge--success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.mpf-badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.mpf-badge--error { background: var(--badge-error-bg); color: var(--badge-error-text); }
.mpf-badge__dot { position: relative; width: 6px; height: 6px; border-radius: var(--radius-ui-full); background: currentColor; }
.mpf-badge__dot--pulse::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: currentColor; opacity: .35;
  animation: mpf-pulse 2s var(--ease-pulse) infinite; }

/* ---------- TextField ---------- */
.mpf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mpf-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-xs); }
.mpf-field__label { font: 500 14px/1.4 var(--font-ui); color: var(--text-primary); }
.mpf-field__count { font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mpf-field__box { display: flex; align-items: center; gap: var(--gap-xs); height: 40px; box-sizing: border-box; padding: 0 var(--gap-sm);
  border: 1px solid var(--border-strong); border-radius: var(--radius-btn-standard); background: var(--surface-raised); color: var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.mpf-field__box:hover { border-color: var(--text-primary); }
.mpf-field__box:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.mpf-field__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: 400 14px/1.4 var(--font-ui); }
.mpf-field__input::placeholder { color: var(--text-tertiary); }
.mpf-field__help { font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.mpf-field--error .mpf-field__box { border-color: var(--status-error); }
.mpf-field--error .mpf-field__help { color: var(--status-error); }
.mpf-field--disabled .mpf-field__box { background: var(--surface-secondary); border-color: var(--border-default); }

/* ---------- Select ---------- */
.mpf-select { position: relative; }
.mpf-select__trigger { width: 100%; justify-content: space-between; cursor: pointer; text-align: left; color: var(--text-primary); font: 400 14px/1.4 var(--font-ui); }
.mpf-select__trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpf-select__trigger .mpf-ico { color: var(--text-secondary); transition: rotate var(--duration-base) var(--ease-standard); }
.mpf-select--open .mpf-select__trigger .mpf-ico:last-child { rotate: 180deg; }
.mpf-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  max-height: 280px; overflow: auto; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-ui-md);
  box-shadow: var(--shadow-ui-md); animation: mpf-dropdown-in var(--duration-base) var(--ease-out-expo) both; }
.mpf-menu--up { top: auto; bottom: calc(100% + 6px); }   /* (no room under the box: the list opens above it) */
.mpf-menu__item { display: flex; align-items: center; gap: var(--gap-xs); padding: var(--gap-xs) var(--gap-sm); border-radius: var(--radius-ui-sm);
  color: var(--text-primary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.mpf-menu__item:hover, .mpf-menu__item[data-active="true"] { background: var(--iconbutton-bg-hover); }
.mpf-menu__item[aria-selected="true"] { background: var(--surface-selected); }
.mpf-menu__item[aria-disabled="true"] { color: var(--text-tertiary); cursor: default; background: none; }
.mpf-menu__item .mpf-menu__note { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.mpf-menu__check { margin-left: auto; color: var(--text-brand); }

/* ---------- Switch ---------- */
.mpf-switch { display: inline-flex; align-items: center; gap: var(--gap-sm); cursor: pointer; font: 400 14px/1.4 var(--font-ui); color: var(--text-primary); }
.mpf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mpf-switch__track { position: relative; flex: none; width: 36px; height: 20px; box-sizing: border-box; border: 1px solid var(--border-strong);
  border-radius: var(--radius-ui-full); background: var(--surface-raised); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.mpf-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-ui-full);
  background: var(--border-strong); transition: translate var(--duration-base) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.mpf-switch input:checked + .mpf-switch__track { background: var(--action-primary-bg); border-color: var(--action-primary-bg); }
.mpf-switch input:checked + .mpf-switch__track::after { translate: 16px 0; background: var(--action-primary-text); }
.mpf-switch--disabled { cursor: not-allowed; color: var(--text-tertiary); }
.mpf-switch--disabled .mpf-switch__track, .mpf-switch--disabled input:checked + .mpf-switch__track { background: var(--iconbutton-bg-hover); border-color: var(--border-default); }
.mpf-switch--disabled .mpf-switch__track::after, .mpf-switch--disabled input:checked + .mpf-switch__track::after { background: var(--text-tertiary); }

/* ---------- Tabs ---------- */
.mpf-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-ui-md); background: var(--iconbutton-bg); }
.mpf-tab { display: inline-flex; align-items: center; gap: var(--gap-xs); height: 32px; padding: 0 var(--gap-sm); border: 0; border-radius: var(--radius-ui-sm);
  background: transparent; color: var(--text-secondary); font: 500 14px/1.4 var(--font-ui); cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.mpf-tab:hover { color: var(--text-primary); }
.mpf-tab[aria-selected="true"] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-ui-sm); }
.mpf-tabs--line { gap: var(--gap-md); padding: 0; background: none; border-radius: 0; box-shadow: inset 0 -1px 0 var(--divider); }
.mpf-tabs--line .mpf-tab { height: 40px; padding: 0; border-radius: 0; box-shadow: inset 0 0 0 transparent; }
.mpf-tabs--line .mpf-tab[aria-selected="true"] { background: none; color: var(--text-brand); box-shadow: inset 0 -2px 0 var(--text-brand); }

/* ---------- TopNav ---------- */
.mpf-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--gap-lg); height: 64px; padding: 0 var(--gap-lg);
  background: var(--surface-primary); transition: box-shadow var(--duration-base) var(--ease-standard); }
.mpf-nav--raised { box-shadow: var(--shadow-ui-sm); }
.mpf-nav__name { font: 500 20px/1 var(--font-display); letter-spacing: -.5px; color: var(--text-primary); white-space: nowrap; }
.mpf-nav__items { display: flex; gap: var(--gap-xs); flex: 1; }
.mpf-nav__item { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--gap-sm); border: 0; border-radius: var(--radius-ui-sm);
  background: none; color: var(--text-primary); font: 500 14px/1 var(--font-ui); cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.mpf-nav__item:hover { background: var(--iconbutton-bg); }
.mpf-nav__item[aria-current="page"] { color: var(--text-brand); box-shadow: inset 0 -2px 0 var(--text-brand); border-radius: var(--radius-ui-sm) var(--radius-ui-sm) 0 0; }
.mpf-nav__right { display: flex; align-items: center; gap: var(--gap-xs); }

/* ---------- IconTile ---------- */
.mpf-tile { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; border: 0; padding: 0;
  border-radius: var(--radius-ui-md); cursor: default; transition: scale var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
button.mpf-tile { cursor: pointer; }
button.mpf-tile:hover { scale: 1.05; }
.mpf-tile--sm { width: 32px; height: 32px; border-radius: var(--radius-ui-sm); }
.mpf-tile--lg { width: 56px; height: 56px; border-radius: var(--radius-ui-lg); }
.mpf-tile--sky { background: var(--tile-sky); color: var(--tile-sky-ink); }
.mpf-tile--lime { background: var(--tile-lime); color: var(--tile-lime-ink); }
.mpf-tile--peach { background: var(--tile-peach); color: var(--tile-peach-ink); }
.mpf-tile--iris { background: var(--tile-iris); color: var(--tile-iris-ink); }
.mpf-tile--seafoam { background: var(--tile-seafoam); color: var(--tile-seafoam-ink); }
.mpf-tile--muted { background: var(--iconbutton-bg-hover); color: var(--text-secondary); }
.mpf-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--text-primary); }

/* ---------- Card (book / template card) ---------- */
.mpf-card { display: flex; flex-direction: column; gap: var(--gap-sm); box-sizing: border-box; padding: var(--gap-lg); min-width: 0;
  border-radius: var(--radius-ui-2xl); background: var(--surface-secondary); color: var(--text-primary); text-decoration: none; cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); }
.mpf-card:hover { box-shadow: var(--shadow-ui-xl); background: var(--surface-raised); }
.mpf-card__thumb { overflow: hidden; border-radius: var(--radius-ui-lg); background: var(--surface-raised); aspect-ratio: 4 / 3; }
.mpf-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-standard); }
.mpf-card:hover .mpf-card__thumb img { scale: 1.05; }
.mpf-card__head { display: flex; align-items: flex-start; gap: var(--gap-sm); }
.mpf-card__title { margin: 0; font: 500 18px/1.4 var(--font-display); }
.mpf-card__sub { margin: 2px 0 0; font: 400 14px/1.4 var(--font-ui); color: var(--text-secondary); }
.mpf-card__meta { display: flex; flex-wrap: wrap; gap: var(--gap-xs); align-items: center; font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.mpf-card__foot { display: flex; align-items: center; gap: var(--gap-md); margin-top: auto; padding-top: var(--gap-xs); }
.mpf-card__go { margin-left: auto; }
.mpf-card:hover .mpf-card__go .mpf-ico { translate: 2px -2px; }
.mpf-rise { animation: mpf-rise var(--duration-rise) ease both; }

/* ---------- Modal ---------- */
.mpf-modal__scrim { position: fixed; inset: 0; z-index: 50; background: var(--overlay); animation: mpf-overlay-in var(--duration-base) ease both; }
.mpf-modal { position: fixed; z-index: 51; left: 50%; top: 10vh; translate: -50% 0; box-sizing: border-box; width: min(560px, calc(100vw - 32px));
  max-height: 80vh; overflow: auto; padding: var(--gap-lg); border-radius: var(--radius-ui-xl); background: var(--surface-raised); color: var(--text-primary);
  box-shadow: var(--shadow-ui-2xl); animation: mpf-dialog-in var(--duration-dialog) var(--ease-out-expo) both; }
.mpf-modal__head { display: flex; align-items: flex-start; gap: var(--gap-md); margin-bottom: var(--gap-md); }
.mpf-modal__title { flex: 1; margin: 0; font: 500 28px/1.2 var(--font-display); }
.mpf-modal__body { font: 400 16px/1.4 var(--font-ui); color: var(--text-secondary); }
.mpf-modal__foot { display: flex; justify-content: flex-end; gap: var(--gap-xs); margin-top: var(--gap-lg); }

/* ---------- Skeleton & Spinner ---------- */
.mpf-skel { display: block; border-radius: var(--radius-ui-sm);
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%) 0 0 / 200% 100%;
  animation: mpf-skeleton-wave var(--duration-wave) ease-in-out infinite; }
.mpf-spin { display: inline-block; flex: none; box-sizing: border-box; border-radius: var(--radius-ui-full); border: 2px solid currentColor; border-right-color: transparent;
  animation: mpf-spin 1s linear infinite; }

/* ---------- Banner ---------- */
.mpf-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--gap-sm); min-height: 40px; box-sizing: border-box;
  padding: var(--gap-xs) 48px var(--gap-xs) var(--gap-xl); background: var(--banner-bg); color: var(--banner-text); font: 500 14px/1.4 var(--font-ui);
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); }
.mpf-banner--gone { transform: translateY(-100%); opacity: 0; }
.mpf-banner__chip { display: inline-flex; align-items: center; gap: var(--gap-xxs); padding: 2px var(--gap-xs); border-radius: var(--radius-ui-sm);
  background: #fcfbf866; color: var(--banner-text); font-size: 12px; text-decoration: none; border: 0; cursor: pointer; }
.mpf-banner__chip .mpf-ico { transition: translate var(--duration-fast) var(--ease-standard); }
.mpf-banner__chip:hover .mpf-ico { translate: 2px 0; }
.mpf-banner__x { position: absolute; right: var(--gap-xs); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--radius-ui-sm); background: none; color: var(--banner-text); cursor: pointer; transition: opacity var(--duration-fast) var(--ease-standard); }
.mpf-banner__x:hover { opacity: .7; }

/* ---------- UpgradeHint ---------- */
.mpf-upg { display: flex; align-items: center; gap: var(--gap-sm); width: 100%; box-sizing: border-box; padding: var(--gap-sm) var(--gap-md); border: 0;
  border-radius: var(--radius-ui-md); background: var(--surface-selected); color: var(--text-primary); text-align: left; cursor: pointer; text-decoration: none;
  font: 400 14px/1.4 var(--font-ui); transition: background-color var(--duration-fast) var(--ease-standard); }
.mpf-upg:hover { background: var(--sky); color: var(--midnight); }
.mpf-upg__text { flex: 1; }
.mpf-upg__text b { font-weight: 600; }
.mpf-upg__go { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--text-brand); white-space: nowrap; }
.mpf-upg:hover .mpf-upg__go { color: var(--cobalt); }
.mpf-upg__go .mpf-ico { transition: translate var(--duration-fast) var(--ease-standard); }
.mpf-upg:hover .mpf-upg__go .mpf-ico { translate: 2px 0; }

/* ---------- GlowBackdrop ---------- */
.mpf-glow { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-ui-3xl); background: var(--surface-selected); }
.mpf-glow__blob { position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; border-radius: var(--radius-ui-full); filter: blur(60px); opacity: .85; }
.mpf-glow__blob:nth-child(1) { background: var(--glow-1); left: -8%; top: -20%; animation: mpf-b0 8s ease-in-out infinite; }
.mpf-glow__blob:nth-child(2) { background: var(--glow-2); right: -6%; top: -18%; animation: mpf-b1 10s ease-in-out 1.5s infinite; }
.mpf-glow__blob:nth-child(3) { background: var(--glow-3); right: -10%; bottom: -30%; animation: mpf-b2 12s ease-in-out 3s infinite; }
.mpf-glow__blob:nth-child(4) { background: var(--glow-4); left: -12%; bottom: -32%; animation: mpf-b3 9s ease-in-out 4.5s infinite; }
.mpf-glow__blob:nth-child(5) { background: var(--glow-5); left: 30%; top: 10%; width: 34%; animation: mpf-b4 7s ease-in-out 2s infinite; }
.mpf-glow__blob:nth-child(6) { background: var(--glow-6); left: 40%; bottom: -20%; width: 30%; animation: mpf-b5 11s ease-in-out 5s infinite; }
.mpf-glow__inner { position: relative; padding: var(--gap-xl); }
.mpf-glow__panel { padding: var(--gap-xl); border-radius: var(--radius-ui-2xl); background: var(--surface-primary); box-shadow: var(--shadow-ui-lg); }

/* ---------- keyframes (timings match the source) ---------- */
@keyframes mpf-dropdown-in { 0% { opacity: 0; translate: 0 -6px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes mpf-overlay-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mpf-dialog-in { 0% { opacity: 0; translate: -50% -10px; scale: .97; } 100% { opacity: 1; translate: -50% 0; scale: 1; } }
@keyframes mpf-spin { 100% { transform: rotate(360deg); } }
@keyframes mpf-pulse { 50% { opacity: 0; scale: 1.8; } }
@keyframes mpf-skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes mpf-rise { 0% { opacity: 0; transform: translateY(25px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes mpf-b0 { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(160px, -100px) scale(1.16); } 50% { transform: translate(-120px, 70px) scale(1.08); } 75% { transform: translate(90px, -50px) scale(1.12); } }
@keyframes mpf-b1 { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(-140px, 110px) scale(1.12); } 50% { transform: translate(100px, -80px) scale(1.2); } 75% { transform: translate(-50px, 40px) scale(1.08); } }
@keyframes mpf-b2 { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(110px, -70px) scale(1.1); } 50% { transform: translate(-160px, 100px) scale(1.16); } 75% { transform: translate(70px, -90px) scale(1.12); } }
@keyframes mpf-b3 { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(-130px, 80px) scale(1.16); } 50% { transform: translate(140px, -50px) scale(1.08); } 75% { transform: translate(-60px, 100px) scale(1.2); } }
@keyframes mpf-b4 { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(150px, -110px) scale(1.12); } 50% { transform: translate(-100px, 60px) scale(1.08); } 75% { transform: translate(50px, -30px) scale(1.08); } }
@keyframes mpf-b5 { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(-80px, 70px) scale(1.2); } 50% { transform: translate(130px, -100px) scale(1.1); } 75% { transform: translate(-140px, 60px) scale(1.16); } }

@media (prefers-reduced-motion: reduce) {
  .mpf-menu, .mpf-modal, .mpf-modal__scrim, .mpf-rise, .mpf-skel, .mpf-glow__blob, .mpf-badge__dot--pulse::before { animation: none; }
  .mpf-spin { animation-duration: 3s; }
  .mpf-card:hover .mpf-card__thumb img, button.mpf-tile:hover { scale: 1; }
}

/* ===== Support and reviews (design system 2026-11-01: TextArea, StarRating, ReviewCard, TicketRow, ChatMessage, Composer) ===== */
/* ---------- TextArea ---------- */
.mpf-field__box--area { height: auto; align-items: stretch; padding: 10px var(--gap-sm); }
.mpf-field__area { margin: 0; padding: 0; min-height: 60px; resize: vertical; line-height: 1.5; }

/* ---------- StarRating: radios under the stars (keyboard: arrows), or read-only spans ---------- */
.mpf-stars { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); }
.mpf-stars__set { display: inline-flex; align-items: center; gap: 2px; }
.mpf-star { position: relative; display: inline-flex; padding: 2px; border-radius: var(--radius-ui-xxs); color: var(--rating-star-empty);
  transition: color var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
span.mpf-star { padding: 0; }
label.mpf-star { cursor: pointer; }
label.mpf-star:hover { scale: 1.12; }
.mpf-star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mpf-star:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mpf-star--on { color: var(--rating-star); }
.mpf-star .mpf-star__on, .mpf-star--on .mpf-star__off { display: none; }
.mpf-star--on .mpf-star__on { display: inline-flex; }
.mpf-stars__text { font: 500 14px/1.4 var(--font-ui); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpf-field--error .mpf-star:not(.mpf-star--on) { color: var(--status-error); }

/* ---------- ReviewCard ---------- */
.mpf-review { display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--gap-lg); border-radius: var(--radius-ui-lg); background: var(--surface-secondary); min-width: 0; }
.mpf-review__head { display: flex; align-items: flex-start; gap: var(--gap-sm); }
.mpf-initials { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-ui-full);
  background: var(--tile-sky); color: var(--tile-sky-ink); font: 500 14px/1 var(--font-ui); }
.mpf-initials--sm { width: 32px; height: 32px; font-size: 12px; }
.mpf-review__who { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpf-review__who .mpf-stars { margin-top: 4px; }
.mpf-review__name { font: 500 16px/1.4 var(--font-display); color: var(--text-primary); }
.mpf-review__mail { font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); overflow-wrap: anywhere; }
.mpf-review__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); white-space: nowrap; }
.mpf-review__text { margin: 0; font: 400 14px/1.5 var(--font-ui); color: var(--text-primary); white-space: pre-line; overflow-wrap: anywhere; }
.mpf-review__foot { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.mpf-review--hidden { opacity: .62; }

/* ---------- TicketRow ---------- */
.mpf-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--gap-sm); width: 100%; box-sizing: border-box;
  padding: var(--gap-sm) var(--gap-md); border: 0; border-bottom: 1px solid var(--divider); background: transparent; color: var(--text-primary);
  text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.mpf-ticket:hover { background: var(--iconbutton-bg); }
.mpf-ticket:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mpf-ticket--selected, .mpf-ticket--selected:hover { background: var(--surface-selected); }
.mpf-ticket__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpf-ticket__top { display: flex; align-items: center; gap: var(--gap-xs); min-width: 0; }
.mpf-ticket__subject { font: 500 14px/1.4 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpf-ticket--unread .mpf-ticket__subject { font-weight: 600; }
.mpf-ticket__snip { font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpf-ticket__side { display: flex; align-items: center; gap: var(--gap-xs); font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); white-space: nowrap; }
.mpf-ticket__dot, .nav-dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-ui-full); background: var(--action-primary-bg); }
.nav-dot { display: inline-block; width: 7px; height: 7px; }

/* ---------- ChatMessage ---------- */
.mpf-msg { display: flex; align-items: flex-end; gap: var(--gap-xs); max-width: 80%; }
.mpf-msg--right { flex-direction: row-reverse; margin-left: auto; }
.mpf-msg__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpf-msg--right .mpf-msg__col { align-items: flex-end; }
.mpf-msg__meta { font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.mpf-msg__meta b { font-weight: 500; color: var(--text-primary); }
.mpf-msg__bubble { padding: 10px 14px; border-radius: var(--radius-ui-lg); background: var(--surface-secondary); color: var(--text-primary);
  font: 400 14px/1.5 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.mpf-msg--left .mpf-msg__bubble { border-bottom-left-radius: var(--radius-ui-xxs); }
.mpf-msg--right .mpf-msg__bubble { background: var(--surface-selected); border-bottom-right-radius: var(--radius-ui-xxs); }

/* ---------- Composer ---------- */
.mpf-composer { display: flex; flex-direction: column; gap: 6px; }
.mpf-composer__box { display: flex; align-items: flex-end; gap: var(--gap-xs); padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) var(--gap-sm);
  border: 1px solid var(--border-strong); border-radius: var(--radius-ui-md); background: var(--surface-raised);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.mpf-composer__box:hover { border-color: var(--text-primary); }
.mpf-composer__box:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.mpf-composer__input { flex: 1; min-width: 0; max-height: 150px; margin: 0; padding: 6px 0; border: 0; outline: 0; resize: none; overflow-y: auto;
  background: transparent; color: var(--text-primary); font: 400 14px/1.5 var(--font-ui); }
.mpf-composer__input::placeholder { color: var(--text-tertiary); }
.mpf-composer__hint { font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.mpf-composer--off .mpf-composer__box { background: var(--surface-secondary); border-color: var(--border-default); }
.mpf-field--error .mpf-composer__box { border-color: var(--status-error); }
.mpf-field--error .mpf-composer__hint { color: var(--status-error); }

@media (prefers-reduced-motion: reduce) {
  label.mpf-star:hover { scale: 1; }
}