@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap";

/* src/styles.css */
html {
  color-scheme: light;
  --primary-color: #370178;
  --primary-color_dark: #210346;
  --primary-color_darkish: #6B2BAA;
  --primary-color_light: #9546DB;
  --warn-color: #ba1a1a;
  --success-color: #17a31e;
  --rating-platinum: #E5E4E2;
  --rating-gold: gold;
  --rating-silver: silver;
  --rating-bronze: #CE8946;
  --rating-bonus: var(--primary-color);
  --rating-platinum-on-light: #475569;
  --rating-gold-on-light: #8A5A00;
  --rating-silver-on-light: #475569;
  --rating-bronze-on-light: #92400E;
  --rating-platinum-on-dark: #AEBBD0;
  --rating-gold-on-dark: #F2C14E;
  --rating-silver-on-dark: #AEBBD0;
  --rating-bronze-on-dark: #E8A25E;
  --rating-platinum-ink: var(--rating-platinum-on-light);
  --rating-gold-ink: var(--rating-gold-on-light);
  --rating-silver-ink: var(--rating-silver-on-light);
  --rating-bronze-ink: var(--rating-bronze-on-light);
  --rating-platinum-icon: var(--rating-platinum-on-light);
  --rating-gold-icon: var(--rating-gold-on-light);
  --rating-silver-icon: var(--rating-silver-on-light);
  --rating-bronze-icon: var(--rating-bronze-on-light);
  --accent-momo-green: #09ffb9;
  --gray-100: #ffffff;
  --gray-98: #fafafa;
  --gray-95: #f6eef8;
  --gray-90: #e7e0ea;
  --gray-80: #cbc4ce;
  --gray-70: #afa9b2;
  --gray-60: #948f98;
  --gray-50: #7a757e;
  --gray-25: #3e3a41;
  --gray-0: #000000;
  --hub-light-pink: #f7edff;
  --hub-pink: #FF0998;
  --hub-darkish-pink: #F1E6F8;
  --hub-royal-purple: #6B2BAA;
  --hub-bright-purple: #9546DB;
  --hub-mojo-purple: #370178;
  --hub-light-gray: rgba(149, 70, 219, 0.07);
  --hub-light-purple: rgba(55, 1, 120, 0.65);
  --marketplace-backdrop: #F3EFFC;
  --marketplace-border: rgba(55, 1, 120, 0.10);
  --marketplace-shadow: 0 2px 16px rgba(55, 1, 120, 0.08);
  --marketplace-text-muted: rgba(55, 1, 120, 0.65);
  --marketplace-gray: rgba(55, 1, 120, 0.08);
  --mm-purple: #370178;
  --mm-dark-purple: #210346;
  --mm-royal: #6B2BAA;
  --mm-bright: #9546DB;
  --mm-green: #09FFB9;
  --mm-pink: #FF0998;
  --mm-dark-pink: #d4247b;
  --mm-pink-light: #FCEFFF;
  --mm-page-bg: #F4EFFC;
  --mm-text-muted: rgba(55, 1, 120, 0.65);
  --mm-border: rgba(55, 1, 120, 0.10);
  --mm-shadow: 4px 4px 16px rgba(55, 1, 120, 0.10);
  --mm-shadow-lg: 0 8px 40px rgba(55, 1, 120, 0.14);
  --mm-brand-purple: #370178;
  --mm-brand-dark: #210346;
  --mm-surface: white;
  --mm-surface-raised: white;
  --mm-surface-alt: #faf8ff;
  --mm-fill-primary: #370178;
  --mm-on-fill-primary: white;
  --mm-on-fill-badge-bg: rgba(255, 255, 255, 0.2);
  --mm-chevron: url(/assets/icons/chevron-down.svg);
  --mm-error: #aa0068;
  --mm-warning: #a06000;
  --mm-success: #007a57;
  --mm-error-bg: rgba(255, 9, 152, 0.08);
  --mm-success-bg: rgba(9, 255, 185, 0.15);
  --mm-error-muted: rgba(255, 9, 152, 0.45);
  --mm-success-muted: rgba(9, 255, 185, 0.45);
  --mm-warning-bg: rgba(245, 166, 35, 0.12);
  --mm-royal-bg: rgba(107, 43, 170, 0.10);
  --mm-purple-bg: rgba(55, 1, 120, 0.08);
  --mm-royal-ink: var(--mm-royal);
  --mm-slate-ink: #475569;
  --mm-on-dark-watermark: rgba(255, 255, 255, 0.06);
  --mm-on-dark-surface: rgba(255, 255, 255, 0.12);
  --mm-on-dark-surface-hover: rgba(255, 255, 255, 0.2);
  --mm-on-dark-divider: rgba(255, 255, 255, 0.15);
  --mm-on-dark-text-muted: rgba(255, 255, 255, 0.7);
  --text-micro-xs: 0.5625rem;
  --text-micro: 0.625rem;
  --text-caption: 0.75rem;
  --text-label: 0.8125rem;
  --text-body: 0.875rem;
  --text-body-lg: 0.9375rem;
  --text-ui: 1rem;
  --text-ui-lg: 1.0625rem;
  --text-ui-xl: 1.125rem;
  --text-heading-sm: 1.3125rem;
  --text-heading: 1.4375rem;
  --text-page-title: 1.5625rem;
  --text-display: 1.75rem;
  --text-display-lg: 2.3125rem;
}
html[data-theme=dark] {
  color-scheme: dark;
  --primary-color: #B18CEC;
  --primary-color_dark: #EDE7F9;
  --warn-color: #FF7A7A;
  --success-color: #35E3AE;
  --rating-platinum-ink: var(--rating-platinum-on-dark);
  --rating-gold-ink: var(--rating-gold-on-dark);
  --rating-silver-ink: var(--rating-silver-on-dark);
  --rating-bronze-ink: var(--rating-bronze-on-dark);
  --rating-platinum-icon: var(--rating-platinum);
  --rating-gold-icon: var(--rating-gold);
  --rating-silver-icon: var(--rating-silver);
  --rating-bronze-icon: var(--rating-bronze);
  --gray-100: #221240;
  --gray-98: #251543;
  --gray-95: #2A184C;
  --gray-90: #33205A;
  --gray-80: #453070;
  --gray-70: #5C4488;
  --gray-60: #7A63A3;
  --gray-50: #9C89BD;
  --gray-25: #D4C9E8;
  --gray-0: #FFFFFF;
  --hub-light-pink: #33205A;
  --hub-darkish-pink: #453070;
  --hub-mojo-purple: #C9AFF2;
  --hub-light-gray: rgba(149, 70, 219, 0.16);
  --hub-light-purple: rgba(237, 231, 249, 0.65);
  --marketplace-backdrop: #150C28;
  --marketplace-border: rgba(237, 231, 249, 0.14);
  --marketplace-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  --marketplace-text-muted: rgba(237, 231, 249, 0.62);
  --marketplace-gray: rgba(177, 140, 236, 0.14);
  --mm-purple: #B18CEC;
  --mm-dark-purple: #EDE7F9;
  --mm-pink-light: rgba(149, 70, 219, 0.20);
  --mm-page-bg: #150C28;
  --mm-text-muted: rgba(237, 231, 249, 0.62);
  --mm-border: rgba(237, 231, 249, 0.14);
  --mm-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  --mm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.60);
  --mm-error: #FF7AC1;
  --mm-warning: #FFC46B;
  --mm-success: #35E3AE;
  --mm-error-bg: rgba(255, 9, 152, 0.16);
  --mm-success-bg: rgba(9, 255, 185, 0.14);
  --mm-warning-bg: rgba(245, 166, 35, 0.16);
  --mm-royal-bg: rgba(149, 70, 219, 0.22);
  --mm-purple-bg: rgba(177, 140, 236, 0.14);
  --mm-royal-ink: #B18CEC;
  --mm-slate-ink: #AEBBD0;
  --mm-surface: #221240;
  --mm-surface-raised: #2A184C;
  --mm-surface-alt: #271646;
  --mm-fill-primary: #8A55D6;
  --mm-on-fill-primary: white;
  --mm-on-fill-badge-bg: rgba(0, 0, 0, 0.28);
  --mm-chevron: url(/assets/icons/chevron-down-light.svg);
}
html[data-theme=dark] .clickable-row:hover {
  background: rgba(237, 231, 249, 0.06);
}
html[data-theme=dark] .form-input:focus {
  box-shadow: 0 0 0 3px rgba(177, 140, 236, 0.25);
}
html[data-theme=dark] .mm-view-toggle button.active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
html[data-theme=dark] .type-chip.type-yn {
  background: #3A2760;
  color: #D9CCF2;
}
html[data-theme=dark] .type-chip.type-mc {
  background: #43296B;
  color: #DCC6F7;
}
html[data-theme=dark] .type-chip.type-num {
  background: #0E4536;
  color: #7BF2CE;
}
html[data-theme=dark] .type-chip.type-img {
  background: #4D3A14;
  color: #F2D49B;
}
html[data-theme=dark] .btn-warning {
  border-color: rgba(245, 158, 11, 0.35);
  color: #F5A623;
}
html[data-theme=dark] .btn-warning:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.10);
  border-color: #F5A623;
}
html[data-theme=dark] .btn-warning:focus-visible {
  outline-color: #F5A623;
}
html[data-theme=dark] .btn-danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #F87171;
}
html[data-theme=dark] .btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.10);
  border-color: #F87171;
}
html[data-theme=dark] .btn-danger:focus-visible {
  outline-color: #F87171;
}
html,
body {
  height: 100%;
}
body {
  background: var(--mm-page-bg);
}
body,
button {
  font-family:
    "Montserrat",
    Verdana,
    sans-serif;
  margin: 0;
}
.w100 {
  width: 100%;
}
.hide {
  display: none;
}
.page-centered {
  display: block;
  max-width: 1300px;
  margin: 0 auto;
}
.page-full-width {
  display: block;
  width: 100%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin-left: 0.5em;
}
html:has(.zoom-backdrop),
html:has(mm-dialog),
html:has(.mm-overlay) {
  overflow: hidden;
}
button.nav {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
button.nav:hover {
  text-decoration: underline;
}
#hubspot-messages-iframe-container.widget-align-right {
  display: none !important;
}
svg > g > g.google-visualization-tooltip {
  pointer-events: none;
}
google-chart.pointer g {
  cursor: pointer;
}
app-dialog h3 {
  margin-top: 0;
}
app-dialog div.actions button {
  margin-left: 1em;
}
.richText > p:first-child {
  margin-top: 0;
}
.richText > p:last-child {
  margin-bottom: 0;
}
.mm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 3, 70, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mm-modal {
  display: flex;
  flex-direction: column;
  background: var(--mm-surface-raised);
  border-radius: 16px;
  box-shadow: var(--mm-shadow);
  padding: 24px;
  margin: 16px;
  max-height: 90dvh;
  overflow: hidden;
}
.mm-modal-sm {
  width: 90dvw;
  max-width: 25rem;
  max-height: 80dvh;
}
.mm-modal-md {
  width: 80dvw;
  max-width: 60rem;
  max-height: 90dvh;
}
.mm-modal-lg {
  width: 80dvw;
  height: 80dvh;
}
.mm-modal-xl {
  width: 90dvw;
  height: 90dvh;
}
@media (max-width: 768px) {
  .mm-modal-md,
  .mm-modal-lg,
  .mm-modal-xl {
    width: 95dvw;
    max-height: 95dvh;
    height: 95dvh;
    margin: 8px;
    padding: 16px;
    border-radius: 12px;
  }
}
.btn-save,
.btn-primary {
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--mm-fill-primary);
  color: var(--mm-on-fill-primary);
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-save:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: var(--mm-royal);
}
.btn-save:disabled,
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-save:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.btn-green {
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--mm-green);
  color: var(--mm-brand-dark);
  font-size: var(--text-body);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.btn-green:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-green:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-green:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.btn-cancel {
  padding: 7px 14px;
  border: 1.5px solid var(--mm-purple);
  border-radius: 8px;
  background: transparent;
  color: var(--mm-dark-purple);
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-cancel:hover:not(:disabled) {
  background: var(--mm-pink-light);
}
.btn-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-cancel:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--mm-border);
  border-radius: 8px;
  background: transparent;
  color: var(--mm-dark-purple);
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--mm-pink-light);
}
.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-ghost:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.btn-on-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--mm-on-dark-surface);
  color: white;
  font-size: var(--text-caption);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-on-dark:hover:not(:disabled) {
  background: var(--mm-on-dark-surface-hover);
}
.btn-on-dark:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-on-dark:focus-visible {
  outline: 2px solid var(--mm-green);
  outline-offset: 2px;
}
.btn-ghost-on-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--mm-on-dark-divider);
  border-radius: 8px;
  background: transparent;
  color: white;
  font-size: var(--text-caption);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-ghost-on-dark:hover:not(:disabled) {
  background: var(--mm-on-dark-surface);
}
.btn-ghost-on-dark:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-ghost-on-dark:focus-visible {
  outline: 2px solid var(--mm-green);
  outline-offset: 2px;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--mm-text-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover:not(:disabled) {
  background: var(--mm-pink-light);
  color: var(--mm-purple);
}
.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-icon:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.btn-icon mm-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.mm-actions-menu {
  min-width: 220px;
  padding: 6px;
  background: var(--mm-surface-raised);
  border-radius: 12px;
  box-shadow: var(--mm-shadow-lg);
  display: flex;
  flex-direction: column;
}
.mm-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--mm-dark-purple);
  text-align: left;
  transition: background 0.15s;
}
.mm-menu-item:hover:not(:disabled) {
  background: var(--mm-pink-light);
}
.mm-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mm-menu-item mm-icon {
  color: var(--mm-purple);
}
.mm-menu-item.danger,
.mm-menu-item.danger mm-icon {
  color: var(--mm-error);
}
.mm-actions-menu.status-menu {
  min-width: 170px;
}
.mm-menu-item.menu-met mm-icon {
  color: var(--mm-success);
}
.mm-menu-item.menu-not-met mm-icon {
  color: var(--mm-error);
}
.mm-menu-item.menu-needs-review mm-icon {
  color: var(--mm-warning);
}
.mm-menu-item.menu-na mm-icon {
  color: var(--mm-text-muted);
}
.mm-menu-divider {
  height: 1px;
  margin: 5px 8px;
  background: var(--mm-border);
}
.mm-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transform: scale(0.88);
  transition:
    background 0.15s,
    color 0.15s,
    border-width 0.15s,
    transform 0.15s;
}
.mm-status-btn:hover:not(:disabled) {
  transform: scale(1);
}
.mm-status-btn:hover:not(:disabled):not(.status-empty) {
  border-width: 3px;
}
.mm-status-btn:disabled {
  cursor: default;
}
.mm-status-btn:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.mm-status-btn.status-met {
  color: var(--mm-success);
  background: var(--mm-success-bg);
}
.mm-status-btn.status-not-met {
  color: var(--mm-error);
  background: var(--mm-error-bg);
}
.mm-status-btn.status-needs-review {
  color: var(--mm-warning);
  background: var(--mm-warning-bg);
}
.mm-status-btn.status-na {
  color: var(--mm-text-muted);
}
.mm-status-btn.status-empty {
  color: var(--mm-text-muted);
  border-style: dashed;
}
.mm-status-btn.status-empty:hover:not(:disabled) {
  color: var(--mm-purple);
  background: var(--mm-purple-bg);
}
.btn-link {
  display: inline;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--mm-purple);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-link:hover:not(:disabled) {
  color: var(--mm-royal);
  text-decoration: underline;
}
.btn-link:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--mm-border);
  border-radius: 8px;
  background: transparent;
  color: var(--mm-dark-purple);
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s;
}
.btn-ghost-sm:hover:not(:disabled) {
  border-color: var(--mm-purple);
  background: var(--mm-pink-light);
}
.btn-ghost-sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-ghost-sm:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.btn-ghost-sm mm-icon {
  font-size: var(--text-ui);
  width: var(--text-ui);
  height: var(--text-ui);
  line-height: var(--text-ui);
}
.btn-save,
.btn-primary,
.btn-cancel,
.btn-ghost,
.btn-green,
.btn-warning,
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.btn-save mm-icon,
.btn-primary mm-icon,
.btn-cancel mm-icon,
.btn-ghost mm-icon,
.btn-green mm-icon,
.btn-warning mm-icon,
.btn-danger mm-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.btn-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(180, 83, 9, 0.25);
  background: transparent;
  color: #b45309;
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-warning:hover:not(:disabled) {
  background: rgba(180, 83, 9, 0.06);
  border-color: #b45309;
}
.btn-warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-warning:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 2px;
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(220, 38, 38, 0.25);
  background: transparent;
  color: #dc2626;
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.06);
  border-color: #dc2626;
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}
.mm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 14px;
  margin: -1rem -1rem 0 -1rem;
  border-bottom: 1px solid var(--mm-border);
}
.mm-modal-header-text {
  min-width: 0;
}
.mm-modal-header-overline {
  font-size: var(--text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-purple);
  margin-bottom: 2px;
}
.mm-modal-header-title {
  font-size: var(--text-ui-lg);
  font-weight: 700;
  color: var(--mm-dark-purple);
  margin: 0;
}
.mm-modal-header-subtitle {
  font-size: var(--text-caption);
  color: var(--mm-text-muted);
  margin-top: 2px;
}
.mm-modal-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--mm-page-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-purple);
  flex-shrink: 0;
}
.mm-modal-header-icon-warning {
  background: var(--mm-warning-bg);
  color: var(--mm-warning);
}
.mm-modal-header-icon-success {
  background: var(--mm-success-bg);
  color: var(--mm-success);
}
.mm-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mm-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-text-muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.mm-modal-close > mm-icon {
  overflow: unset;
}
.mm-modal-close:hover {
  background: var(--mm-page-bg);
  color: var(--mm-dark-purple);
}
.mm-modal-close:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.mm-modal-header-dark {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      var(--mm-brand-purple),
      var(--mm-brand-dark));
  border-bottom: none;
  padding: 22px 24px 20px;
}
.mm-modal-header-dark .mm-modal-header-overline {
  color: var(--mm-green);
}
.mm-modal-header-dark .mm-modal-header-title {
  color: white;
  font-size: var(--text-heading-sm);
  line-height: 1.25;
}
.mm-modal-header-dark .mm-modal-header-subtitle {
  color: rgba(255, 255, 255, 0.6);
}
.mm-modal-header-dark .mm-modal-header-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--mm-green);
}
.mm-modal-header-dark .mm-modal-close {
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 1;
}
.mm-modal-header-dark .mm-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.mm-modal-header-dark .mm-modal-header-left {
  position: relative;
  z-index: 1;
}
.mm-modal-header-watermark {
  position: absolute;
  top: -16px;
  right: -20px;
  width: 140px;
  opacity: 0.12;
  pointer-events: none;
}
.mm-modal-header-watermark img {
  width: 100%;
  display: block;
}
.mm-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 8px;
}
.mm-modal-body.no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  margin: 0 -1rem -1rem -1rem;
  border-top: 1px solid var(--mm-border);
  background: var(--mm-page-bg);
}
.cell-strong {
  font-weight: 600;
  color: var(--mm-dark-purple);
}
.cell-muted {
  color: var(--mm-text-muted);
}
.cell-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--mm-purple-bg);
  color: var(--mm-purple);
}
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-micro);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.type-chip.type-yn {
  background: #e7e0ee;
  color: #2a005a;
}
.type-chip.type-mc {
  background: #f0e5fa;
  color: #4f1f86;
}
.type-chip.type-num {
  background: #ceffed;
  color: #005f42;
}
.type-chip.type-img {
  background: #fdefd7;
  color: #6e4400;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--mm-dark-purple);
}
.form-input {
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--text-body);
  font-family: inherit;
  color: var(--mm-dark-purple);
  background: var(--mm-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: var(--mm-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
}
select.form-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
select.form-input option {
  color: var(--mm-dark-purple);
  background: var(--mm-surface);
}
select.form-input option:disabled {
  color: var(--mm-text-muted);
}
@media (max-width: 768px) {
  .form-input,
  input[type=number],
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=url],
  input[type=date],
  textarea,
  select {
    font-size: 16px;
  }
}
.form-input::placeholder {
  color: var(--mm-text-muted);
  font-weight: 400;
}
textarea.form-input,
.form-textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: var(--mm-purple);
  box-shadow: 0 0 0 3px rgba(55, 1, 120, 0.1);
}
.form-input:disabled {
  background: var(--mm-page-bg);
  color: var(--mm-text-muted);
}
.form-error {
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--warn-color);
}
.clickable-row {
  position: relative;
  transition: background 0.15s;
}
.clickable-row:hover {
  background: rgba(55, 1, 120, 0.03);
}
.row-click-target {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.row-click-target:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: -2px;
}
.cell-id {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 4px;
  font-family:
    ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  font-weight: 700;
  color: var(--mm-purple);
  cursor: pointer;
}
.cell-id:hover,
.cell-id:focus-visible {
  text-decoration: underline;
}
.cell-id:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mm-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--mm-border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.mm-checkbox:checked {
  background: var(--mm-fill-primary);
  border-color: var(--mm-fill-primary);
}
.mm-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -1px;
  width: 6px;
  height: 10px;
  border: solid var(--mm-on-fill-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mm-checkbox:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.mm-checkbox:hover:not(:checked) {
  border-color: var(--mm-royal);
}
.mm-checkbox-static {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--mm-fill-primary);
  border: 2px solid var(--mm-fill-primary);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
}
.mm-checkbox-static::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--mm-on-fill-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--mm-dark-purple);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.form-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--mm-border);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.form-radio:checked {
  border-color: var(--mm-purple);
}
.form-radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--mm-purple);
}
.form-radio:focus-visible {
  outline: 2px solid var(--mm-purple);
  outline-offset: 2px;
}
.form-radio:hover:not(:checked) {
  border-color: var(--mm-royal);
}
.mm-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--mm-border);
  flex-wrap: wrap;
}
.mm-spacer {
  flex: 1 1 auto;
}
.mm-rows-badge {
  font-size: var(--text-label);
  font-weight: 700;
  color: var(--mm-text-muted);
  background: var(--mm-page-bg);
  border: 1.5px solid var(--mm-border);
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}
.mm-section-label {
  font-size: var(--text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-text-muted);
  margin-bottom: 10px;
}
.mm-overline {
  font-size: var(--text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-text-muted);
}
.mm-subtitle {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--mm-text-muted);
  margin-top: 2px;
}
.mm-card-title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--mm-dark-purple);
  margin-bottom: 16px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--mm-border);
  flex-shrink: 0;
}
.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--mm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.breadcrumb:hover {
  color: var(--mm-purple);
}
.breadcrumb span {
  color: var(--mm-purple);
}
.breadcrumb-chevron {
  font-size: var(--text-caption);
  width: var(--text-caption);
  height: var(--text-caption);
}
.page-title {
  font-size: var(--text-page-title);
  font-weight: 700;
  color: var(--mm-dark-purple);
  line-height: 1.2;
  margin: 0;
}
.mm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--mm-text-muted);
}
.mm-empty-state mm-icon {
  font-size: 42px;
  width: 42px;
  height: 42px;
  opacity: 0.3;
}
.mm-empty-state p {
  font-size: var(--text-body);
  font-weight: 600;
  margin: 0;
}
.mm-view-toggle {
  display: flex;
  background: var(--mm-page-bg);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.mm-view-toggle button {
  border: none;
  background: transparent;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--mm-text-muted);
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.mm-view-toggle button mm-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.mm-view-toggle button.active {
  background: var(--mm-surface);
  color: var(--mm-purple);
  box-shadow: 0 1px 4px rgba(55, 1, 120, 0.12);
}
.mm-view-toggle button:hover:not(.active) {
  color: var(--mm-dark-purple);
}
.mm-ext-chip {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mm-ext-chip.ext-png {
  background: var(--mm-success-bg);
  color: var(--mm-success);
}
.mm-ext-chip.ext-jpg,
.mm-ext-chip.ext-jpeg {
  background: var(--mm-warning-bg);
  color: var(--mm-warning);
}
.mm-ext-chip.ext-svg {
  background: var(--mm-purple-bg);
  color: var(--mm-purple);
}
.mm-ext-chip.ext-gif {
  background: var(--mm-royal-bg);
  color: var(--mm-royal);
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */