.app-body {
  min-height: 100vh;
  color: var(--mmv-text);
}

.app-body::before {
  background:
    radial-gradient(52% 32% at 96% -6%, color-mix(in srgb, var(--mmv-magenta) 16%, transparent), transparent 58%),
    radial-gradient(42% 30% at 4% 8%, color-mix(in srgb, var(--mmv-violet-deep) 36%, transparent), transparent 62%),
    var(--mmv-bg);
}

.dev-bar {
  padding: var(--mmv-space-2) var(--mmv-space-3);
  background: color-mix(in srgb, var(--mmv-surface) 88%, var(--mmv-violet-deep));
  border-bottom: 1px solid var(--mmv-border-strong);
  color: var(--mmv-text-secondary);
  font-size: 0.875rem;
}

.dev-bar p {
  margin: 0.15rem 0;
}

.dev-bar strong {
  color: var(--mmv-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dev-bar-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmv-space-1) var(--mmv-space-2);
  align-items: center;
}

.dev-bar button,
.dev-bar a {
  appearance: none;
  border: 1px solid var(--mmv-border-strong);
  background: transparent;
  color: var(--mmv-text);
  padding: 0.2rem 0.55rem;
  border-radius: var(--mmv-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mmv-duration) var(--mmv-ease), border-color var(--mmv-duration) var(--mmv-ease);
}

.dev-bar button:hover,
.dev-bar a:hover,
.dev-bar [aria-current="true"] {
  background: color-mix(in srgb, var(--mmv-violet) 16%, transparent);
  border-color: var(--mmv-violet);
}

.app-frame {
  min-height: 100vh;
}

.app-top,
.app-auth-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mmv-space-2) var(--mmv-space-3);
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--mmv-border);
  background: color-mix(in srgb, var(--mmv-bg) 72%, transparent);
  backdrop-filter: blur(22px) saturate(160%);
}

.app-auth-top {
  justify-content: space-between;
}

.app-auth-top .wordmark em,
.app-top .wordmark em {
  display: none;
}

@media (min-width: 880px) {
  .app-auth-top .wordmark em,
  .app-top .wordmark em {
    display: block;
  }
}

.app-identity {
  margin: 0;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  color: var(--mmv-text-secondary);
  font-size: 0.92rem;
}

.pill,
.status {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--mmv-border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill-plan,
.status-success {
  color: var(--mmv-turquoise);
  border-color: color-mix(in srgb, var(--mmv-turquoise) 40%, transparent);
}

.status-review {
  color: var(--mmv-violet);
}

.status-danger {
  color: var(--mmv-danger);
  border-color: color-mix(in srgb, var(--mmv-danger) 40%, transparent);
}

.app-body-row {
  display: grid;
  grid-template-columns: 13.75rem 1fr;
  min-height: calc(100vh - 4.75rem);
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: var(--mmv-space-3) var(--mmv-space-2);
  border-right: 1px solid var(--mmv-border);
  background: color-mix(in srgb, var(--mmv-surface) 82%, transparent);
  overflow-y: auto;
  max-height: calc(100dvh - 4.75rem);
}

.app-nav a {
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--mmv-radius);
  color: var(--mmv-text-secondary);
  transition: color var(--mmv-duration) var(--mmv-ease), background var(--mmv-duration) var(--mmv-ease), box-shadow var(--mmv-duration) var(--mmv-ease);
}

.app-nav a:hover {
  color: var(--mmv-text);
  background: color-mix(in srgb, var(--mmv-violet) 10%, transparent);
}

.app-nav a[aria-current="page"] {
  color: var(--mmv-text);
  background: color-mix(in srgb, var(--mmv-turquoise) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--mmv-turquoise), var(--glow-turquoise);
}

.app-main-wrap {
  padding: var(--mmv-space-4) var(--mmv-space-4) 3.2rem;
}

#main {
  width: min(1080px, 100%);
}

.page-kicker {
  margin: 0 0 var(--mmv-space-1);
  font-family: var(--font-mono);
  font-size: var(--mmv-type-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mmv-turquoise) 78%, var(--mmv-text-secondary));
}

.page-title,
.auth-shell h1 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: var(--mmv-type-title);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.lede {
  margin: 0 0 var(--mmv-space-4);
  color: var(--mmv-text-secondary);
  max-width: 62ch;
  font-size: 1.05rem;
}

.perm-note,
.backend-flag,
.mock-flag {
  font-size: 0.9rem;
  color: var(--mmv-text-secondary);
  background: color-mix(in srgb, var(--mmv-surface-2) 80%, transparent);
  border: 1px solid var(--mmv-border-strong);
  padding: 0.7rem 0.85rem;
  margin: 0 0 var(--mmv-space-3);
  border-radius: var(--mmv-radius);
}

.workspace-shortcuts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 var(--mmv-space-4); }
.access-denied { max-width: 42rem; padding: clamp(1.25rem, 4vw, 2.5rem) 0; }

.stat-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr));
  gap: var(--mmv-space-2);
  margin: 0 0 var(--mmv-space-4);
}

.stat,
.mmv-card {
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid var(--mmv-border);
  border-top: 1px solid var(--mmv-border-strong);
  background: color-mix(in srgb, var(--mmv-surface-2) 72%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--mmv-bg) 45%, transparent);
  border-radius: var(--mmv-radius);
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 560;
  line-height: 1.1;
}

.stat span,
.mmv-card p {
  color: var(--mmv-text-secondary);
  font-size: 0.88rem;
}

.usage {
  height: 0.35rem;
  background: color-mix(in srgb, var(--mmv-text) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.55rem;
}

.usage > span {
  display: block;
  height: 100%;
  width: var(--usage, 20%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mmv-turquoise) 80%, var(--mmv-violet)), var(--mmv-turquoise));
  box-shadow: 0 0 10px color-mix(in srgb, var(--mmv-turquoise) 35%, transparent);
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--mmv-border);
}

.list small {
  color: var(--mmv-text-muted);
}

.empty-state {
  padding: var(--mmv-space-4) 0 var(--mmv-space-5);
  max-width: 58ch;
}

.empty-state h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  margin-bottom: 0.5rem;
}

.auth-shell,
.guest-card {
  width: min(28.5rem, calc(100% - 2rem));
  margin: 2.4rem auto 4rem;
}

.guest-card {
  width: min(34rem, calc(100% - 2rem));
}

.field {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
}

.field span,
.field-label {
  font-size: 0.88rem;
  color: var(--mmv-text-secondary);
}

.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--mmv-space-3);
  align-items: start;
}

.resource-layout [data-detail] {
  grid-column: 1 / -1;
}

.resource-panel h2,
.resource-panel h3 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.resource-list a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.resource-list a:hover,
.resource-list a[aria-current="true"] {
  color: var(--mmv-text);
}

.shell-subscriber .resource-list li {
  display: block;
  padding: 0;
  border-bottom: 0;
}

.shell-subscriber .resource-list a {
  display: block;
  padding: 0.85rem 0.95rem;
  margin: 0 0 0.45rem;
  background: #1d1026;
  border: 1px solid color-mix(in srgb, #f4eff6 10%, transparent);
  border-radius: var(--mmv-radius);
}

.resource-list a:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.field-optional {
  color: var(--mmv-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field select {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--mmv-border-strong);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 78%, transparent);
  color: var(--mmv-text);
  transition: border-color var(--mmv-duration) var(--mmv-ease), box-shadow var(--mmv-duration) var(--mmv-ease);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.wl-form input:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 2px;
  border-color: var(--mmv-turquoise);
  box-shadow: var(--glow-turquoise);
}

.field input:-webkit-autofill,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-text-fill-color: #f4eff6;
  caret-color: #f4eff6;
  box-shadow: 0 0 0 1000px #1d1026 inset;
  transition: background-color 99999s ease-out 0s;
}

.field-error,
[data-status][data-kind="error"] {
  color: var(--mmv-danger);
  font-size: 0.88rem;
}

[data-status][data-kind="loading"],
[data-status][data-kind="info"] {
  color: var(--mmv-turquoise);
}

.check-row {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}

.nav-toggle {
  display: none;
}

.dropzone {
  border: 1px dashed var(--mmv-border-strong);
  padding: var(--mmv-space-5) var(--mmv-space-3);
  text-align: center;
  color: var(--mmv-text-secondary);
  background: color-mix(in srgb, var(--mmv-surface) 50%, transparent);
  border-radius: var(--mmv-radius);
}

.dropzone.is-over,
.dropzone:focus-visible {
  border-color: var(--mmv-turquoise);
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
  box-shadow: var(--glow-turquoise);
}

.usage-line {
  margin: 0 0 var(--mmv-space-3);
  color: var(--mmv-text-secondary);
}

.media-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: var(--mmv-space-2);
  margin: 0 0 var(--mmv-space-3);
}

.media-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.review-actions,
.reject-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--mmv-space-3);
}

.app-body [hidden] {
  display: none;
}

body[data-role="TEAM_MEMBER"] [data-owner-only],
body[data-role="TEAM_MEMBER"] [data-resource] [data-detail],
body[data-role="TEAM_MEMBER"] [data-form="edit-client"],
body[data-role="TEAM_MEMBER"] [data-form="edit-vault"] {
  display: none;
}

.wm-panel {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--mmv-border);
  max-width: 100%;
  overflow-x: hidden;
}

.wm-panel > h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.45rem;
}

.wm-panel .lede {
  max-width: 62ch;
}

.wm-soon {
  margin: 0 0 1.15rem;
  color: var(--mmv-text-muted);
  font-size: 0.88rem;
}

.wm-section {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--mmv-border);
}

.wm-section-end {
  border-bottom: 0;
  padding-bottom: 0;
}

.wm-section h3 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
}

.wm-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.85rem;
  margin: 0 0 0.65rem;
  color: var(--mmv-text);
  cursor: pointer;
}

.wm-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wm-switch-ui {
  width: 2.7rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-text) 18%, transparent);
  border: 1px solid var(--mmv-border-strong);
  position: relative;
}

.wm-switch-ui::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.14rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #f4eff6;
}

.wm-switch input:checked + .wm-switch-ui {
  background: color-mix(in srgb, var(--mmv-turquoise) 55%, #1d1026);
  border-color: var(--mmv-turquoise);
}

.wm-switch input:checked + .wm-switch-ui::after {
  left: 1.28rem;
}

.wm-switch input:focus-visible + .wm-switch-ui {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.wm-switch strong {
  color: var(--mmv-turquoise);
  font-weight: 600;
}

.wm-panel.is-off [data-wm-setup] {
  opacity: 0.62;
}

.wm-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wm-seg-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.85rem;
  padding: 0 0.95rem;
  border: 1px solid var(--mmv-border-strong);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 70%, transparent);
}

.wm-seg-option:has(input:checked) {
  border-color: var(--mmv-turquoise);
  box-shadow: inset 0 0 0 1px var(--mmv-turquoise);
}

.wm-seg input:focus-visible,
.wm-pos:focus-visible,
.field input[type="range"]:focus-visible,
.wm-logo-choice input:focus-visible,
.wm-upload:focus-within {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.wm-hint[data-kind="error"],
.field [aria-invalid="true"] {
  color: var(--mmv-danger);
}

.wm-hint,
.wm-summary {
  color: var(--mmv-text-secondary);
  font-size: 0.88rem;
}

.wm-summary {
  color: var(--mmv-text);
  font-size: 1rem;
  white-space: pre-line;
}

.wm-fieldset {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.wm-fieldset legend {
  margin-bottom: 0.55rem;
  color: var(--mmv-text-secondary);
  font-size: 0.88rem;
}

.wm-positions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  max-width: 22rem;
}

.wm-pos {
  min-height: 3rem;
  border: 1px solid var(--mmv-border-strong);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 70%, transparent);
  color: var(--mmv-text);
  cursor: pointer;
}

.wm-pos[aria-pressed="true"] {
  border-color: var(--mmv-turquoise);
  box-shadow: inset 0 0 0 1px var(--mmv-turquoise);
}

.field input[type="range"] {
  width: 100%;
  max-width: 100%;
  accent-color: var(--mmv-turquoise);
}

.wm-logo-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.wm-logo-visual,
.wm-logo-row img,
.wm-logo-mark {
  width: 100%;
  max-width: 6.5rem;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 80%, transparent);
  border: 1px solid var(--mmv-border);
}

.wm-logo-mark {
  display: grid;
  place-items: center;
  color: #f4eff6;
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.wm-logo-name {
  margin: 0 0 0.5rem;
  color: var(--mmv-text);
}

.wm-logo-choice {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.5rem;
  margin: 0 0 0.45rem;
}

.wm-upload {
  position: relative;
  display: inline-flex;
  margin: 0.35rem 0 0.4rem;
  cursor: pointer;
}

.wm-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.wm-preview {
  position: relative;
  min-height: 11rem;
  max-width: 100%;
  border-radius: var(--mmv-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mmv-surface-2) 88%, #120a18), #120a18);
  border: 1px solid var(--mmv-border);
  overflow: hidden;
}

.wm-preview-mark {
  position: absolute;
  max-width: 42%;
  padding: 0.2rem 0.4rem;
  color: #f4eff6;
  font-size: calc(0.7rem + (var(--wm-size, 0.2) * 1.4rem));
  line-height: 1.2;
  pointer-events: none;
  overflow: hidden;
}

.wm-preview-mark[data-position="TOP_LEFT"] { top: 0.7rem; left: 0.7rem; }
.wm-preview-mark[data-position="TOP_RIGHT"] { top: 0.7rem; right: 0.7rem; text-align: right; }
.wm-preview-mark[data-position="BOTTOM_LEFT"] { bottom: 0.7rem; left: 0.7rem; }
.wm-preview-mark[data-position="BOTTOM_RIGHT"] { bottom: 0.7rem; right: 0.7rem; text-align: right; }

.wm-preview-mark.is-logo {
  width: calc(18% + (var(--wm-size, 0.2) * 40%));
  height: 1.6rem;
  background: color-mix(in srgb, #f4eff6 55%, transparent);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .wm-logo-row {
    grid-template-columns: minmax(4.5rem, 5.5rem) minmax(0, 1fr);
  }

  .wm-positions {
    max-width: none;
  }

  .wm-pos {
    min-height: 2.85rem;
  }
}

.reject-confirm p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--mmv-text-secondary);
}

.activity-panel h3 {
  margin: var(--mmv-space-3) 0 0.4rem;
  font-size: 1rem;
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--mmv-border);
  color: var(--mmv-text-secondary);
}

.activity-list time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mmv-text-muted);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--mmv-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
  padding: 0.7rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface-2) 72%, transparent);
  color: inherit;
  text-decoration: none;
}

.media-grid a:hover {
  border-color: color-mix(in srgb, var(--mmv-turquoise) 45%, var(--mmv-border));
}

.media-grid a[aria-current="true"] {
  border-color: var(--mmv-turquoise);
  box-shadow: var(--glow-turquoise);
  position: relative;
}

.media-grid a[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--mmv-turquoise);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mmv-turquoise) 70%, transparent);
}

.media-grid a:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.media-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--mmv-radius) - 2px);
  background: #120a18;
}

.media-thumb img,
.media-preview img,
.media-preview video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.media-preview {
  margin: 0 0 var(--mmv-space-3);
  max-height: 22rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--mmv-bg) 70%, transparent);
  border-radius: var(--mmv-radius);
}

.media-preview video {
  max-height: 22rem;
}

.media-thumb-label,
.media-card-copy small {
  color: var(--mmv-text-muted);
}

.media-card-copy strong {
  display: block;
  overflow-wrap: anywhere;
}

.meta-list {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 var(--mmv-space-3);
}

.meta-list dt {
  font-size: 0.75rem;
  color: var(--mmv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.meta-list dd {
  margin: 0.15rem 0 0;
  overflow-wrap: anywhere;
}

.shell-client .app-main-wrap {
  padding-top: var(--mmv-space-5);
}

.shell-client .page-title {
  font-size: clamp(2rem, 4vw, 3rem);
}

.shell-client .app-main-wrap {
  padding-top: var(--mmv-space-6, 2.5rem);
  max-width: 56rem;
}

.client-points {
  margin: 0 0 var(--mmv-space-4);
  padding-left: 1.2rem;
  color: var(--mmv-text-secondary);
}

.context-note {
  color: var(--mmv-text-secondary);
  max-width: 38rem;
}

.client-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--mmv-space-3);
  margin: var(--mmv-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.client-vault-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 12rem;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease;
}

.client-vault-card:hover {
  transform: translateY(-2px);
  border-color: var(--mmv-violet);
}

.client-vault-card:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.client-guide {
  width: min(28rem, 92vw);
  padding: var(--mmv-space-4);
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: var(--mmv-surface);
  color: var(--mmv-text);
}

.client-guide::backdrop {
  background: color-mix(in srgb, var(--mmv-bg) 70%, transparent);
}

.client-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--mmv-space-3);
  background: color-mix(in srgb, var(--mmv-bg) 78%, transparent);
}

.client-lightbox-panel {
  width: min(48rem, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: var(--mmv-space-4);
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: var(--mmv-surface);
}

.client-lightbox-panel .media-preview {
  max-height: 60vh;
}

.client-media-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.media-grid .client-media-item > .client-media-open {
  min-height: 0;
}

.favorite-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface-2) 80%, transparent);
  color: var(--mmv-text);
  cursor: pointer;
}

.favorite-toggle:hover {
  border-color: var(--mmv-violet);
}

.favorite-toggle:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.favorite-toggle.is-selected {
  border-color: var(--mmv-focus);
  box-shadow: inset 0 0 0 1px var(--mmv-focus);
}

.favorite-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.favorite-state {
  font-size: 0.85rem;
  color: var(--mmv-text-secondary);
}

.favorite-lightbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 var(--mmv-space-3);
}

.media-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: stretch;
}

.download-toggle,
.favorite-toggle {
  min-height: 2.75rem;
}

.download-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface-2) 80%, transparent);
  color: var(--mmv-text);
  cursor: pointer;
}

.download-toggle:hover {
  border-color: var(--mmv-violet);
}

.download-toggle:focus-visible,
.lightbox-nav .btn:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

.archived-note {
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--mmv-focus);
  background: color-mix(in srgb, var(--mmv-surface-2) 70%, transparent);
}

.media-thumb.is-loading,
.media-preview.is-loading {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mmv-surface-2) 40%, transparent) 25%, color-mix(in srgb, var(--mmv-surface) 70%, transparent) 50%, color-mix(in srgb, var(--mmv-surface-2) 40%, transparent) 75%);
  background-size: 200% 100%;
}

.media-failed {
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: 0.7rem;
  color: var(--mmv-text-secondary);
  text-align: center;
}

.lightbox-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.client-lightbox[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .media-thumb.is-loading,
  .media-preview.is-loading {
    background: color-mix(in srgb, var(--mmv-surface-2) 70%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-vault-card {
    transition: none;
  }

  .client-vault-card:hover {
    transform: none;
  }
}

.shell-client .app-top {
  border-bottom-color: color-mix(in srgb, var(--mmv-wl-accent) 50%, var(--mmv-border));
}

.shell-client .wordmark em {
  color: var(--mmv-wl-accent);
}

.shell-client .wordmark {
  min-width: 0;
}

.shell-client .wordmark strong {
  overflow-wrap: anywhere;
}

.client-brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--mmv-surface) 80%, transparent);
}

.powered-by-mmv {
  margin: 0;
  padding: 0.55rem 1.15rem 1rem;
  color: var(--mmv-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.shell-client .btn-primary {
  background: var(--mmv-wl-primary);
  color: var(--mmv-wl-on-primary);
  border-color: transparent;
}

.shell-client .client-vault-card .pill,
.shell-client .app-identity .pill {
  border-color: color-mix(in srgb, var(--mmv-wl-accent) 45%, var(--mmv-border));
}

.shell-client .app-nav a[aria-current="page"] {
  box-shadow: inset 2px 0 0 var(--mmv-wl-accent);
}

.shell-client .app-nav a:hover,
.shell-client .app-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--mmv-wl-primary) 16%, transparent);
}

.shell-guest .guest-card,
.shell-guest .guest-workspace {
  text-align: left;
}

.guest-workspace {
  width: min(42rem, calc(100% - 2rem));
  margin: 2rem auto 4rem;
}

.guest-top {
  justify-content: space-between;
}

.guest-review-note {
  margin: 0 0 var(--mmv-space-3);
  padding: 0.85rem 1rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface-2) 70%, transparent);
}

.guest-guidance ul,
.guest-help ol {
  margin: 0 0 var(--mmv-space-3);
  padding-left: 1.2rem;
  color: var(--mmv-text-secondary);
}

.guest-dropzone {
  margin: 0 0 var(--mmv-space-3);
}

.guest-file-field {
  margin: 0.75rem 0 0;
}

.guest-file-list {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 var(--mmv-space-3);
  padding: 0;
  list-style: none;
}

.guest-file-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface-2) 72%, transparent);
}

.guest-file-preview {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: calc(var(--mmv-radius) - 2px);
  background: color-mix(in srgb, var(--mmv-bg) 70%, transparent);
}

.guest-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guest-file-meta strong {
  display: block;
  overflow-wrap: anywhere;
}

.guest-file-meta small,
.guest-file-state {
  display: block;
  color: var(--mmv-text-secondary);
}

.guest-file-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 var(--mmv-space-4);
}

.guest-file-field input[type="file"]:focus-visible,
.guest-dropzone .btn:focus-visible,
.guest-actions .btn:focus-visible,
.guest-remove:focus-visible {
  outline: 2px solid var(--mmv-focus);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .guest-file-card {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .guest-file-actions {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guest-dropzone,
  .guest-file-card {
    transition: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.setup-panel {
  margin: 0 0 var(--mmv-space-4);
}

.setup-progress-title {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 560;
  color: var(--mmv-text);
}

.setup-meter {
  height: 0.28rem;
  margin: 0 0 var(--mmv-space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-text) 8%, transparent);
  overflow: hidden;
}

.setup-meter > span {
  display: block;
  height: 100%;
  background: var(--mmv-turquoise);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mmv-turquoise) 40%, transparent);
}

.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-step {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mmv-border);
}

.setup-step:last-child {
  border-bottom: 0;
}

.setup-mark {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border: 1px solid var(--mmv-border-strong);
  border-radius: 999px;
  color: var(--mmv-text);
  font-size: 0.75rem;
  line-height: 1;
}

.setup-mark-done {
  border-color: var(--mmv-focus, #39d6d0);
  color: var(--mmv-focus, #39d6d0);
}

.setup-step-label {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

a.setup-step-label {
  color: var(--mmv-text);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

a.setup-step-label:focus-visible {
  outline: 2px solid var(--mmv-focus, #39d6d0);
  outline-offset: 3px;
}

.setup-step-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--mmv-text-secondary);
  font-size: 0.88rem;
}

.setup-step.is-unavailable .setup-step-label {
  color: var(--mmv-text-secondary);
}

.setup-actions {
  margin: var(--mmv-space-3) 0 0;
}

.setup-settings {
  margin-top: var(--mmv-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .setup-meter > span {
    transition: none;
  }
}

@media (max-width: 840px) {
  .app-body-row {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: inline-flex;
    min-height: 2.4rem;
    padding: 0 0.7rem;
    border: 1px solid var(--mmv-border-strong);
    background: transparent;
    color: var(--mmv-text);
    border-radius: var(--mmv-radius);
  }

  .app-nav {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--mmv-border);
  }

  .app-nav.is-open,
  .shell-admin .app-top .app-nav,
  body[data-admin] .app-top .app-nav {
    display: flex;
  }

  .app-identity {
    margin-left: 0;
    width: 100%;
  }

  .app-main-wrap {
    padding: var(--mmv-space-3);
  }

  .resource-layout {
    grid-template-columns: 1fr;
  }

  .list li {
    grid-template-columns: 1fr;
  }

  .media-grid {
    grid-template-columns: 1fr 1fr;
  }

  .media-toolbar {
    grid-template-columns: 1fr;
  }

  .setup-step {
    padding: 0.9rem 0;
  }

  a.setup-step-label {
    display: inline-block;
    min-height: 2.5rem;
    padding-top: 0.35rem;
  }
}

@media (max-width: 520px) {
  .media-grid {
    grid-template-columns: 1fr;
  }

  .media-toolbar {
    grid-template-columns: 1fr;
  }
}

.pu-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmv-space-2) var(--mmv-space-3);
  justify-content: space-between;
  align-items: flex-start;
}

.pu-badge {
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mmv-turquoise) 45%, var(--mmv-border));
  color: var(--mmv-text);
  font-size: 0.82rem;
}

.pu-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mmv-space-2);
  margin: var(--mmv-space-3) 0 0;
}

.pu-meta dt {
  color: var(--mmv-text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pu-meta dd {
  margin: 0.15rem 0 0;
  color: var(--mmv-text);
}

.pu-section {
  margin-top: var(--mmv-space-3);
}

.pu-section > h2 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
}

.pu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mmv-space-3);
}

.pu-meter {
  min-width: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 86%, transparent);
}

.pu-meter-head {
  display: flex;
  justify-content: space-between;
  gap: var(--mmv-space-2);
  align-items: baseline;
}

.pu-meter h3 {
  margin: 0;
  font-size: 1rem;
}

.pu-meter-value {
  margin: 0;
  color: var(--mmv-text);
  text-align: right;
}

.pu-track {
  margin: 0.7rem 0 0.55rem;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-border-strong) 70%, transparent);
}

.pu-track span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: var(--mmv-turquoise);
}

.pu-approaching .pu-track span,
.pu-high .pu-track span {
  background: var(--mmv-violet);
}

.pu-reached .pu-track span,
.pu-over .pu-track span {
  background: var(--mmv-magenta);
}

.pu-meter-note,
.pu-meter-status,
.pu-soon,
.pu-legacy {
  color: var(--mmv-text-secondary);
  font-size: 0.9rem;
}

.pu-meter-status {
  margin-bottom: 0;
  color: var(--mmv-text);
}

.pu-features {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
}

.pu-skel-bar {
  height: 0.7rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-border) 80%, transparent);
}

.pu-skel-short {
  width: 42%;
}

@media (max-width: 900px) {
  .pu-grid,
  .pu-meta {
    grid-template-columns: 1fr;
  }
}

.wl-layout {
  display: grid;
  gap: var(--mmv-space-4);
  align-items: start;
}

.wl-card,
.wl-preview {
  min-width: 0;
  padding: 1rem 1.05rem 1.15rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 86%, transparent);
}

.wl-card h2,
.wl-preview h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.wl-card p,
.wl-preview p {
  color: var(--mmv-text-secondary);
}

.wl-card label,
.wl-color-row label {
  display: block;
  margin: 0.7rem 0 0.3rem;
}

.wl-form input[type="text"] {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
}

.wl-logo-preview img,
.wl-preview-mark img {
  max-width: 4.5rem;
  max-height: 4.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wl-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.wl-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: center;
}

.wl-color-row input[type="text"] {
  width: 7.5rem;
  font-family: var(--font-mono, monospace);
}

.wl-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  border: 1px solid var(--mmv-border-strong);
  background: #8C4DFF;
}

.wl-swatch-accent {
  background: #39D6D0;
}

.wl-swatch-wrap input[type="color"] {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--mmv-border-strong);
  background: transparent;
  cursor: pointer;
}

.wl-toggle {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.wl-toggle input {
  margin-top: 0.25rem;
}

.wl-save-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.4rem;
}

.wl-status[data-kind="error"] {
  color: var(--mmv-danger);
}

.wl-status[data-kind="success"] {
  color: var(--mmv-success);
}

.wl-preview-card {
  margin-top: 0.8rem;
  padding: 0.85rem;
  border: 1px solid var(--mmv-border);
  border-top: 3px solid var(--wl-preview-primary, #8C4DFF);
  background: color-mix(in srgb, var(--mmv-bg) 55%, var(--mmv-surface));
}

.wl-preview-header {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
}

.wl-preview-header strong,
.wl-preview-header em {
  display: block;
}

.wl-preview-header em {
  color: var(--wl-preview-accent, #39D6D0);
  font-size: 0.8rem;
}

.wl-preview-mark {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--wl-preview-primary, #8C4DFF) 22%, transparent);
}

.wl-preview-powered {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
}

.wl-deferred ul {
  margin: 0 0 0.7rem;
  padding-left: 1.15rem;
}

.field-hint {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--mmv-text-muted);
}

@media (min-width: 960px) {
  .wl-layout {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  }
}

@media (max-width: 720px) {
  .wl-form input[type="text"],
  .wl-color-row input[type="text"] {
    max-width: 100%;
  }
}

.adm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mmv-space-3);
}

.adm-card {
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 86%, transparent);
}

.adm-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--mmv-space-2);
  align-items: baseline;
}

.adm-form .field {
  display: block;
  margin: 0.7rem 0;
}

.adm-inline {
  display: grid;
  grid-template-columns: 1fr 8rem;
  gap: var(--mmv-space-2);
}

.adm-table-wrap {
  overflow-x: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
}

.adm-table th,
.adm-table td {
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}

.adm-audit {
  padding-left: 1.1rem;
}

.adm-warn {
  border-left: 3px solid var(--mmv-turquoise);
  padding-left: 0.7rem;
}

@media (max-width: 900px) {
  .adm-grid,
  .adm-inline {
    grid-template-columns: 1fr;
  }
}

.bill-hero,
.bill-card,
.bill-notice,
.bill-policy {
  max-width: 42rem;
  margin-bottom: var(--mmv-space-4);
}

.bill-card,
.bill-notice,
.bill-policy {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--mmv-border);
  border-radius: calc(var(--mmv-radius) + 4px);
  background: color-mix(in srgb, var(--mmv-surface) 78%, transparent);
}

.bill-plan {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.bill-price {
  margin: 0.15rem 0 0;
  font-size: 1.2rem;
}

.bill-interval,
.bill-hint,
.bill-feedback {
  color: var(--mmv-text-secondary);
}

.bill-status {
  margin: 0.7rem 0;
}

.bill-meta {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.bill-meta dt {
  color: var(--mmv-text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bill-meta dd {
  margin: 0.1rem 0 0;
}

.bill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.bill-notice {
  border-left: 3px solid var(--mmv-turquoise);
}

.bill-options {
  display: grid;
  gap: 0.85rem;
}

.bill-option {
  padding: 0.9rem 1rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
}

.bill-option ul {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
}

@media (min-width: 900px) {
  .bill-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bill-actions .btn {
    width: 100%;
  }
}

.ops-section {
  margin: 1.6rem 0;
}

.ops-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mmv-space-3);
}

.ops-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mmv-space-3);
}

.ops-filter {
  max-width: 22rem;
}

.ops-dialog {
  width: min(36rem, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--mmv-border);
  border-radius: var(--mmv-radius);
  background: var(--mmv-surface);
  color: var(--mmv-text);
}

.ops-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

@media (min-width: 960px) {
  .ops-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ops-metrics {
    grid-template-columns: 1fr;
  }
}

/* Phase K — Luxury editorial SaaS + quiet premium platform */

.btn-secondary {
  background: color-mix(in srgb, var(--mmv-surface-2) 80%, transparent);
  border-color: var(--mmv-border-strong);
  color: var(--mmv-text);
  box-shadow: none;
}

.btn-secondary:hover {
  border-color: var(--mmv-violet);
}

.btn-danger {
  background: color-mix(in srgb, var(--mmv-danger) 18%, var(--mmv-surface));
  border-color: color-mix(in srgb, var(--mmv-danger) 45%, transparent);
  color: var(--mmv-text);
  box-shadow: none;
}

.btn-quiet {
  min-height: 2.25rem;
  padding: 0.3rem 0.55rem;
  background: transparent;
  border-color: transparent;
  color: var(--mmv-text-secondary);
  box-shadow: none;
}

.btn[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.status::before,
.pill::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: var(--mmv-radius-pill);
  background: currentColor;
  flex: 0 0 auto;
  margin-right: 0.35rem;
}

.status-internal,
.pill-internal {
  color: var(--mmv-turquoise);
  border-color: color-mix(in srgb, var(--mmv-turquoise) 42%, transparent);
}

.status-warning,
.status-past-due,
.status-legacy,
.status-draft {
  color: var(--mmv-warning);
  border-color: color-mix(in srgb, var(--mmv-warning) 40%, transparent);
}

.status-frozen,
.status-incomplete {
  color: var(--mmv-danger);
  border-color: color-mix(in srgb, var(--mmv-danger) 40%, transparent);
}

.status-published {
  color: var(--mmv-turquoise);
}

.field textarea {
  width: 100%;
  min-height: 6.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mmv-border-strong);
  border-radius: var(--mmv-radius);
  background: color-mix(in srgb, var(--mmv-surface) 78%, transparent);
  color: var(--mmv-text);
  resize: vertical;
}

.field [aria-invalid="true"] {
  border-color: var(--mmv-danger);
}

.mmv-skeleton {
  min-height: 1rem;
  border-radius: var(--mmv-radius-md);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mmv-surface-2) 50%, transparent), color-mix(in srgb, var(--mmv-text) 10%, transparent), color-mix(in srgb, var(--mmv-surface-2) 50%, transparent));
  background-size: 200% 100%;
  animation: mmv-shimmer 1.2s var(--mmv-ease) infinite;
}

@keyframes mmv-shimmer {
  to { background-position: -200% 0; }
}

.empty-state p:first-of-type {
  color: var(--mmv-text-secondary);
  line-height: var(--mmv-leading-body);
}

.toast,
[data-status][data-kind="success"] {
  color: var(--mmv-success);
}

.shell-subscriber {
  --mmv-canvas: #120a18;
  --mmv-canvas-ink: #f4eff6;
  --mmv-canvas-muted: #b8afc1;
}

.shell-subscriber .app-top {
  background: #120a18;
  border-bottom-color: color-mix(in srgb, #39d6d0 16%, transparent);
}

.shell-subscriber .app-nav {
  background: #160c1e;
  border-right-color: color-mix(in srgb, #f4eff6 8%, transparent);
}

.shell-subscriber .app-main-wrap {
  position: relative;
  background: #120a18;
  color: #f4eff6;
  min-height: calc(100vh - 4.75rem);
  isolation: isolate;
}

.shell-subscriber .app-main-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glow-ambient);
  opacity: 0.85;
}

.shell-subscriber #main {
  width: min(72rem, 100%);
}

.shell-subscriber .app-main-wrap .stat,
.shell-subscriber .app-main-wrap .mmv-card,
.shell-subscriber .app-main-wrap .wl-card,
.shell-subscriber .app-main-wrap .resource-panel,
.shell-subscriber .app-main-wrap .bill-option,
.shell-subscriber .app-main-wrap .setup-panel,
.shell-subscriber .app-main-wrap .pu-hero,
.shell-subscriber .app-main-wrap .pu-section {
  background: #1d1026;
  border-color: color-mix(in srgb, #f4eff6 10%, transparent);
  box-shadow: none;
}

.shell-subscriber .app-main-wrap .setup-panel,
.shell-subscriber .app-main-wrap .pu-hero {
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid color-mix(in srgb, #f4eff6 10%, transparent);
  border-radius: var(--mmv-radius);
}

.shell-subscriber .app-main-wrap .field input,
.shell-subscriber .app-main-wrap .field select,
.shell-subscriber .app-main-wrap .field textarea,
.shell-subscriber .app-main-wrap .wl-form input[type="text"] {
  background: #160c1e;
  color: #f4eff6;
  border-color: color-mix(in srgb, #f4eff6 16%, transparent);
}

.shell-subscriber .app-main-wrap .dropzone {
  background: color-mix(in srgb, #1d1026 80%, #120a18);
  color: #b8afc1;
}

.shell-subscriber .btn-primary:hover,
.shell-subscriber .btn-primary:focus-visible {
  box-shadow: var(--glow-purple);
}

.shell-subscriber .resource-list a,
.shell-subscriber .mmv-card.vault-card {
  transition: border-color var(--mmv-duration) var(--mmv-ease), box-shadow var(--mmv-duration) var(--mmv-ease);
}

.shell-subscriber .resource-list a:hover,
.shell-subscriber .resource-list a:focus-visible,
.shell-subscriber .mmv-card.vault-card:hover,
.shell-subscriber .mmv-card.vault-card:focus-visible {
  border-color: color-mix(in srgb, #8c4dff 45%, transparent);
  box-shadow: var(--glow-purple);
}

.shell-subscriber .status-success,
.shell-subscriber .status-published,
.shell-subscriber .status-internal,
.shell-subscriber .pill-internal,
.shell-subscriber .setup-mark-done {
  box-shadow: 0 0 10px color-mix(in srgb, #39d6d0 28%, transparent);
}

.shell-subscriber .adm-table,
.shell-subscriber table {
  background: #1d1026;
  color: #f4eff6;
}

.shell-subscriber .adm-table th,
.shell-subscriber table th {
  color: #b8afc1;
}

.shell-subscriber .adm-table tbody tr,
.shell-subscriber table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, #f4eff6 8%, transparent);
}

.shell-subscriber .adm-table tbody tr:hover,
.shell-subscriber table tbody tr:hover {
  background: color-mix(in srgb, #39d6d0 6%, transparent);
}

.shell-subscriber .wl-preview-card {
  min-height: 14rem;
  padding: 1.1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wl-preview-primary, #8c4dff) 14%, #1d1026), #120a18);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #39d6d0 16%, transparent);
}

@media (max-width: 430px) {
  .shell-subscriber .app-nav a[aria-current="page"],
  .shell-subscriber .btn-primary:hover,
  .shell-subscriber .media-grid a[aria-current="true"] {
    box-shadow: inset 2px 0 0 var(--mmv-turquoise);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-subscriber .usage > span,
  .shell-subscriber .setup-meter > span {
    box-shadow: none;
  }
}

.shell-client .app-main-wrap {
  max-width: min(72rem, 100%);
}

.shell-client .client-vault-grid,
.shell-client .media-grid {
  gap: var(--mmv-space-4);
}

.shell-client .client-lightbox {
  backdrop-filter: blur(16px);
}

.shell-admin .app-top {
  align-items: center;
}

.shell-admin .app-top .app-nav,
body[data-admin] .app-top .app-nav {
  flex-direction: row;
  flex-wrap: wrap;
  border: 0;
  background: transparent;
  padding: 0;
  gap: 0.15rem;
}

.shell-admin .app-top .app-nav a,
body[data-admin] .app-top .app-nav a {
  font-size: 0.92rem;
  padding: 0.4rem 0.65rem;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.adm-table th {
  text-align: left;
  font-weight: 600;
  color: var(--mmv-text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adm-table tbody tr:hover {
  background: color-mix(in srgb, var(--mmv-violet) 8%, transparent);
}

.adm-table-wrap {
  overflow-x: auto;
}

.auth-shell {
  padding: 1.6rem 1.4rem 1.8rem;
  border: 1px solid var(--mmv-border);
  background: color-mix(in srgb, var(--mmv-surface) 88%, transparent);
  box-shadow: var(--mmv-shadow-md);
}

.guest-dropzone {
  border: 1px dashed var(--mmv-border-strong);
  padding: var(--mmv-space-5) var(--mmv-space-3);
  text-align: center;
}

@media (max-width: 880px) {
  .media-toolbar {
    grid-template-columns: 1fr;
  }

  .adm-table {
    min-width: 36rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mmv-skeleton { animation: none; }
  .btn:hover { transform: none; }
}

@media (max-width: 880px) {
  .app-frame,
  .app-main,
  .app-main-wrap,
  .app-top,
  .app-auth-top {
    max-width: 100%;
    min-width: 0;
  }

  .app-top,
  .app-auth-top {
    padding: 0.55rem 1rem;
  }

  .app-main-wrap {
    padding: 1rem;
  }

  .app-nav.is-open {
    max-height: min(70dvh, 28rem);
    overflow: auto;
  }
}

/* Subscriber workstation v2 — structural, not a retheme */
.shell-subscriber {
  --layer-0: #0d0712;
  --layer-1: #160c1e;
  --layer-2: #1d1026;
}

.shell-subscriber .app-frame {
  min-height: 100dvh;
  background: var(--layer-0);
}

.shell-subscriber .app-top {
  min-height: 3rem;
  padding: 0.35rem 0.85rem;
  gap: 0.55rem;
  background: var(--layer-0);
  border-bottom: 1px solid color-mix(in srgb, #39d6d0 14%, transparent);
}

.shell-subscriber .app-top .wordmark em {
  display: none;
}

.shell-subscriber .app-identity {
  font-size: 0.8rem;
}

.shell-subscriber .app-body-row {
  grid-template-columns: 11.25rem minmax(0, 1fr);
  min-height: calc(100dvh - 3rem);
}

.shell-subscriber .app-nav {
  gap: 0.08rem;
  padding: 0.7rem 0.45rem;
  background: var(--layer-1);
  box-shadow: inset -1px 0 0 color-mix(in srgb, #39d6d0 12%, transparent), var(--depth-1);
}

.shell-subscriber .app-nav a {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.15rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  background: transparent;
  box-shadow: none;
}

.shell-subscriber .app-nav a .nav-mark {
  color: color-mix(in srgb, #39d6d0 70%, #b8afc1);
  font-size: 0.68rem;
  font-weight: 600;
}

.shell-subscriber .app-nav a:hover {
  color: #f4eff6;
  background: color-mix(in srgb, #39d6d0 7%, transparent);
}

.shell-subscriber .app-nav a[aria-current="page"] {
  color: #f4eff6;
  background: color-mix(in srgb, #39d6d0 8%, transparent);
  box-shadow: inset 2px 0 0 #39d6d0, 0 0 12px color-mix(in srgb, #39d6d0 18%, transparent);
}

.shell-subscriber .app-main-wrap {
  padding: 0.85rem 1rem 2.4rem;
  background: var(--layer-0);
}

.shell-subscriber .app-main-wrap::before {
  opacity: 0.45;
}

.shell-subscriber #main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
}

.shell-subscriber #main > .page-head {
  order: 0;
}

.shell-subscriber #dashboard-root {
  order: 1;
}

.shell-subscriber #setup-checklist {
  order: 8;
  margin-top: 1.1rem;
}

.shell-subscriber #setup-checklist .setup-progress-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.92rem;
}

.shell-subscriber #setup-checklist .setup-panel li {
  padding: 0.28rem 0;
}

.shell-subscriber .page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.85rem;
  margin: 0 0 0.7rem;
}

.shell-subscriber .page-kicker {
  margin: 0;
  font-size: 0.62rem;
}

.shell-subscriber .page-title,
.shell-subscriber .page-title.page-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}

.shell-subscriber #main[data-page="subscriber:overview"] .page-title,
.shell-subscriber main:not([data-page]) .page-title {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
}

.shell-subscriber .lede {
  max-width: none;
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
}

.shell-subscriber .app-main-wrap .stat,
.shell-subscriber .app-main-wrap .mmv-card,
.shell-subscriber .app-main-wrap .wl-card,
.shell-subscriber .app-main-wrap .resource-panel,
.shell-subscriber .app-main-wrap .bill-option,
.shell-subscriber .app-main-wrap .setup-panel,
.shell-subscriber .app-main-wrap .pu-hero,
.shell-subscriber .app-main-wrap .pu-section,
.shell-subscriber .app-main-wrap .bill-card,
.shell-subscriber .app-main-wrap .bill-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.shell-subscriber .setup-panel {
  padding: 0 0 0.85rem;
  margin: 0 0 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, #39d6d0 14%, transparent);
}

.shell-subscriber .console-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
  align-items: end;
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, #f4eff6 8%, transparent);
}

.shell-subscriber .console-strip .stat {
  min-width: 6.5rem;
}

.shell-subscriber .console-strip .stat b {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.45rem;
}

.shell-subscriber .vault-strip,
.shell-subscriber .vault-tile-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 0.7rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.shell-subscriber .vault-tile-list li {
  padding: 0;
  border: 0;
}

.shell-subscriber .vault-tile {
  display: grid;
  min-height: 12.5rem;
  padding: 0;
  overflow: hidden;
  background: var(--layer-1);
  border: 0;
  box-shadow: var(--depth-1);
  text-decoration: none;
  color: inherit;
}

.shell-subscriber .vault-tile-preview {
  display: block;
  min-height: 5.6rem;
  background:
    linear-gradient(180deg, transparent 30%, var(--layer-1)),
    radial-gradient(80% 70% at 20% 10%, color-mix(in srgb, #8c4dff 22%, transparent), transparent 58%),
    radial-gradient(70% 80% at 90% 80%, color-mix(in srgb, #39d6d0 16%, transparent), transparent 55%),
    #120a18;
}

.shell-subscriber .vault-tile-meta {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem 0.7rem;
}

.shell-subscriber .vault-tile-meta strong {
  font-size: 0.92rem;
}

.shell-subscriber .vault-tile:hover,
.shell-subscriber .vault-tile:focus-visible,
.shell-subscriber .vault-tile[aria-current="true"] {
  box-shadow: var(--glow-turquoise);
}

.shell-subscriber .vault-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}

.shell-subscriber .vault-board > [aria-labelledby="vault-list-heading"] {
  order: 1;
}

.shell-subscriber .vault-board > [data-detail],
.shell-subscriber .vault-board > [data-readonly-detail] {
  order: 3;
  grid-column: 1 / -1;
}

.shell-subscriber [data-page="subscriber:vaults"] .lede {
  display: none;
}

.shell-subscriber [data-page="subscriber:vaults"] #vault-list-heading,
.shell-subscriber [data-page="subscriber:vaults"] #create-vault-heading {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.shell-subscriber .media-console {
  display: flex;
  flex-direction: column;
}

.shell-subscriber .media-console > .page-head,
.shell-subscriber .media-console > [data-page-status],
.shell-subscriber .media-console > .media-toolbar,
.shell-subscriber .media-console > .usage-line {
  order: 0;
}

.shell-subscriber .media-console-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  order: 1;
}

.shell-subscriber .media-upload {
  order: 3;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, #f4eff6 8%, transparent);
}

.shell-subscriber .media-upload {
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.7rem;
}
.shell-subscriber .media-upload h2 {
  font-size: 0.78rem;
  margin: 0 0 0.25rem;
}
.shell-subscriber .media-upload .dropzone {
  min-height: 3.2rem;
  padding: 0.45rem;
}

.shell-subscriber .media-toolbar {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  align-items: end;
  margin-bottom: 0.4rem;
}

.shell-subscriber .media-grid {
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.28rem;
}

.shell-subscriber .media-grid a,
.shell-subscriber .media-tile {
  position: relative;
  padding: 0;
  gap: 0;
  background: var(--layer-1);
  border: 0;
  box-shadow: none;
}

.shell-subscriber .media-thumb {
  aspect-ratio: 1;
  background: #0a0610;
}

.shell-subscriber .media-card-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 0.45rem 0.5rem;
  background: linear-gradient(180deg, transparent, rgb(8 4 12 / 0.82));
}

.shell-subscriber .media-card-copy strong {
  font-size: 0.72rem;
}

.shell-subscriber .media-grid a[aria-current="true"],
.shell-subscriber .media-tile[aria-current="true"] {
  z-index: 1;
  box-shadow: var(--glow-turquoise);
  outline: 1px solid #39d6d0;
}

.shell-subscriber .media-inspector {
  padding: 0.75rem 0 0;
  border-top: 1px solid color-mix(in srgb, #39d6d0 16%, transparent);
  background: var(--layer-1);
}

.shell-subscriber .media-inspector h2 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.92rem;
}

.shell-subscriber .wl-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}

.shell-subscriber .wl-card h2,
.shell-subscriber .bill-card h2,
.shell-subscriber .bill-hero .page-title,
.shell-subscriber .pu-hero .page-title,
.shell-subscriber [data-page="subscriber:settings"] h2,
.shell-subscriber [data-page="subscriber:team"] h2 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.shell-subscriber .bill-plan {
  font-size: 1.35rem;
}

.shell-subscriber .ops-dialog,
.shell-subscriber [data-detail] {
  background: var(--layer-3);
  box-shadow: var(--depth-2);
}

.shell-subscriber .field input,
.shell-subscriber .field select,
.shell-subscriber .field textarea,
.shell-subscriber .wl-form input[type="text"] {
  min-height: 2.35rem;
  background: var(--layer-1);
}

@media (min-width: 1100px) {
  .shell-subscriber .media-console-stage {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }

  .shell-subscriber .media-inspector {
    position: sticky;
    top: 0.7rem;
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, #39d6d0 16%, transparent);
    padding: 0 0 0 0.9rem;
    max-height: calc(100dvh - 4.5rem);
    overflow: auto;
  }

  .shell-subscriber .wl-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  }
}

@media (max-width: 880px) {
  .shell-subscriber .app-body-row {
    grid-template-columns: 1fr;
  }

  .shell-subscriber .vault-board,
  .shell-subscriber .media-console-stage,
  .shell-subscriber .wl-layout {
    grid-template-columns: 1fr;
  }

  .shell-subscriber .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .shell-subscriber .media-grid {
    grid-template-columns: 1fr;
  }
}

/* Subscriber wow v3 — luxury creative studio, not SaaS chrome */
.shell-subscriber .app-frame {
  background:
    radial-gradient(52% 38% at 6% -4%, color-mix(in srgb, #8c4dff 16%, transparent), transparent 58%),
    radial-gradient(40% 32% at 98% 2%, color-mix(in srgb, #39d6d0 10%, transparent), transparent 52%),
    var(--layer-0);
}

.shell-subscriber .app-main-wrap::before {
  opacity: 0.7;
  background:
    radial-gradient(70% 50% at 80% 0%, color-mix(in srgb, #d94fd5 7%, transparent), transparent 55%),
    var(--glow-ambient);
}

.shell-subscriber .app-top .wordmark {
  letter-spacing: 0.01em;
}

.shell-subscriber .app-nav a .nav-mark {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-grid;
  place-items: center;
  border-radius: 2px;
  background: color-mix(in srgb, #39d6d0 8%, transparent);
}

.shell-subscriber .btn,
.shell-subscriber .app-main-wrap .btn,
.shell-subscriber .mmv-chat-compose button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 2.6rem;
  padding: 0.55rem 1.2rem;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, filter 0.22s ease;
}

.shell-subscriber .btn-primary,
.shell-subscriber .app-main-wrap .btn-primary {
  color: #f4eff6;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
    linear-gradient(180deg, #3b2068 0%, #1a0d2c 100%);
  border: 1px solid color-mix(in srgb, #8c4dff 52%, #f4eff6);
  box-shadow: var(--mmv-cta-rest);
}

.shell-subscriber .btn-primary:hover,
.shell-subscriber .btn-primary:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 1px color-mix(in srgb, #39d6d0 28%, transparent),
    0 12px 28px color-mix(in srgb, #8c4dff 38%, transparent);
}

.shell-subscriber .btn-secondary,
.shell-subscriber .app-main-wrap .btn-secondary {
  color: #f4eff6;
  background: linear-gradient(180deg, #24152f, #180d22);
  border: 1px solid color-mix(in srgb, #c9a6ff 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shell-subscriber .btn-secondary:hover {
  border-color: color-mix(in srgb, #39d6d0 40%, transparent);
}

.shell-subscriber .btn-ghost,
.shell-subscriber .app-main-wrap .btn-ghost {
  color: #f4eff6;
  background: color-mix(in srgb, #f4eff6 4%, transparent);
  border: 1px solid color-mix(in srgb, #f4eff6 16%, transparent);
  box-shadow: none;
}

.shell-subscriber .btn-ghost:hover,
.shell-subscriber .btn-ghost:focus-visible {
  border-color: color-mix(in srgb, #39d6d0 48%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, #39d6d0 16%, transparent);
}

.shell-subscriber .btn-danger,
.shell-subscriber [data-reject-yes],
.shell-subscriber [data-archive] {
  color: #fff6f8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 46%),
    linear-gradient(160deg, #ff8aa8, #d94fd5 62%, #8c4dff);
  border: 1px solid color-mix(in srgb, #ffc3d2 36%, transparent);
}

.shell-subscriber .btn-icon {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 6px;
}

.shell-subscriber .btn-compact {
  min-height: 2.1rem;
  padding: 0.32rem 0.75rem;
  font-size: 0.78rem;
}

.shell-subscriber .field input,
.shell-subscriber .field select,
.shell-subscriber .field textarea,
.shell-subscriber .wl-form input[type="text"],
.shell-subscriber .wl-form input[type="color"] {
  border-radius: 5px;
  border-color: color-mix(in srgb, #f4eff6 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.shell-subscriber .field input:focus,
.shell-subscriber .field select:focus,
.shell-subscriber .field textarea:focus,
.shell-subscriber .wl-form input:focus {
  border-color: #39d6d0;
  box-shadow: var(--glow-turquoise);
}

.shell-subscriber .bill-card,
.shell-subscriber .bill-hero,
.shell-subscriber .pu-hero,
.shell-subscriber .pu-section,
.shell-subscriber [data-page="subscriber:settings"] section,
.shell-subscriber [data-page="subscriber:team"] section,
.shell-subscriber [data-page="subscriber:clients"] .resource-panel,
.shell-subscriber [data-page="subscriber:plan"] .pu-hero {
  position: relative;
  padding: 1rem 0 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, #f4eff6 8%, transparent);
}

.shell-subscriber .bill-plan {
  display: inline-block;
  margin: 0.15rem 0 0.2rem;
  padding: 0.15rem 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.7rem;
  font-weight: 560;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #f4eff6 20%, #c9a6ff 58%, #39d6d0 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shell-subscriber .bill-price {
  font-size: 1.05rem;
  color: #39d6d0;
  letter-spacing: 0.04em;
}

.shell-subscriber .bill-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.shell-subscriber .bill-option {
  padding: 0.95rem 0.95rem 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, #8c4dff 10%, transparent), transparent 42%),
    var(--layer-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f4eff6 8%, transparent), var(--depth-1);
}

.shell-subscriber .bill-option h3 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.shell-subscriber .pu-meter {
  padding: 0.85rem 0.9rem 0.95rem;
  background: var(--layer-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f4eff6 7%, transparent);
}

.shell-subscriber .pu-meter .usage > span,
.shell-subscriber .usage > span {
  background: linear-gradient(90deg, #39d6d0, color-mix(in srgb, #8c4dff 70%, #39d6d0));
  box-shadow: 0 0 12px color-mix(in srgb, #39d6d0 28%, transparent);
}

.shell-subscriber [data-page="subscriber:clients"] .resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 17.5rem);
  gap: 1.2rem;
}

.shell-subscriber [data-page="subscriber:clients"] .resource-layout > [data-owner-only]:first-of-type {
  order: 2;
}

.shell-subscriber [data-page="subscriber:clients"] .resource-layout > [aria-labelledby="client-list-heading"] {
  order: 1;
}

.shell-subscriber .resource-list a {
  display: block;
  padding: 0.75rem 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, #f4eff6 8%, transparent);
  background: transparent;
}

.shell-subscriber .resource-list a:hover {
  box-shadow: none;
  border-color: color-mix(in srgb, #39d6d0 35%, transparent);
}

.shell-subscriber .wl-preview-card {
  min-height: 18rem;
  padding: 1.15rem 1.15rem 5.5rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wl-preview-primary, #8c4dff) 22%, #1a0d24), #0d0712);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--wl-preview-accent, #39d6d0) 28%, transparent),
    0 18px 40px rgb(8 4 12 / 0.4);
}

.shell-subscriber .wl-preview-card::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 1.1rem;
  height: 3.8rem;
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wl-preview-accent, #39d6d0) 22%, #160c1e) 0 32%, color-mix(in srgb, #f4eff6 8%, #160c1e) 32% 66%, color-mix(in srgb, var(--wl-preview-primary, #8c4dff) 18%, #160c1e) 66% 100%);
  opacity: 0.9;
}

.shell-subscriber .wl-preview {
  position: relative;
}

.shell-subscriber .wl-preview-card {
  position: relative;
}

.shell-subscriber .empty-state {
  padding: 1.6rem 0.2rem;
  color: #b8afc1;
}

.shell-subscriber .empty-state h3 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.05rem;
}

.shell-subscriber .media-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgb(8 4 12 / 0.4);
}

.shell-subscriber .review-actions .btn {
  min-height: 2.15rem;
  font-size: 0.78rem;
}

.shell-subscriber .mmv-chat-launch {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 50%),
    linear-gradient(155deg, #9b63ff, #5c28c4);
  border-color: color-mix(in srgb, #efd9ff 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px color-mix(in srgb, #8c4dff 30%, transparent);
}

.shell-subscriber .mmv-chat-panel {
  background: #160c1e;
  border-color: color-mix(in srgb, #39d6d0 16%, transparent);
}

.shell-subscriber .mmv-chat-head h2 {
  font-family: "Source Sans 3", sans-serif;
}

@media (max-width: 880px) {
  .shell-subscriber .bill-options,
  .shell-subscriber [data-page="subscriber:clients"] .resource-layout {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-subscriber .btn,
  .shell-subscriber .media-tile {
    transition: none;
    transform: none;
  }
}

/* Creative studio v3 — four anchor screens */
.shell-subscriber .studio-welcome {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, #39d6d0 14%, transparent);
}

.shell-subscriber .studio-welcome-name {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.shell-subscriber .studio-welcome-meta,
.shell-subscriber .studio-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8afc1;
}

.shell-subscriber .studio-reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 22rem);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
}

.shell-subscriber .studio-reel .studio-section-title,
.shell-subscriber .studio-usage .studio-section-title {
  grid-column: 1 / -1;
}

.shell-subscriber .vault-cover {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 14rem;
  color: inherit;
  text-decoration: none;
  background: var(--layer-1);
  box-shadow: var(--depth-1);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.shell-subscriber .vault-cover-visual {
  display: block;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 80% at 18% 12%, color-mix(in srgb, #8c4dff 22%, transparent), transparent 58%),
    radial-gradient(60% 70% at 88% 80%, color-mix(in srgb, #39d6d0 16%, transparent), transparent 55%),
    #120a18;
}

.shell-subscriber .vault-cover-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shell-subscriber .vault-cover-empty {
  display: grid;
  place-items: center;
}

.shell-subscriber .vault-cover-empty em {
  font-family: Fraunces, Georgia, serif;
  font-style: normal;
  font-size: 2rem;
  color: color-mix(in srgb, #39d6d0 70%, #f4eff6);
}

.shell-subscriber .vault-cover-meta {
  position: absolute;
  inset: auto 0 0;
  padding: 1.4rem 0.8rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgb(8 4 12 / 0.88));
  display: grid;
  gap: 0.15rem;
}

.shell-subscriber .vault-cover:hover,
.shell-subscriber .vault-cover[aria-current="true"] {
  transform: translateY(-3px);
  box-shadow: var(--glow-turquoise);
}

.shell-subscriber .vault-tile-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.8rem;
}

.shell-subscriber .vault-tile-list .vault-cover {
  min-height: 0;
}

.shell-subscriber .studio-usage {
  display: grid;
  gap: 0.55rem;
  max-width: 36rem;
}

.shell-subscriber .studio-meter {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.78rem;
  color: #b8afc1;
}

.shell-subscriber .storage-risk-meter {
  height: 0.62rem;
}

.shell-subscriber .pu-track {
  display: block;
  height: 0.38rem;
  overflow: hidden;
  background: color-mix(in srgb, #8c4dff 16%, #160c1e);
}

.shell-subscriber .pu-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #39d6d0, color-mix(in srgb, #8c4dff 45%, #39d6d0));
}

.shell-subscriber .pu-meter.pu-approaching[data-usage-kind="storage"] .pu-track > span {
  background: var(--mmv-turquoise);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mmv-turquoise) 28%, transparent);
}

.shell-subscriber .wl-layout {
  align-items: start;
}

.shell-subscriber .wl-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.shell-subscriber .wl-preview-stage[data-preview-stage="mobile"] .wl-preview-card {
  width: min(22rem, 100%);
  margin-inline: auto;
}

.shell-subscriber .wl-preview-card {
  min-height: 28rem;
  padding: 1rem 1rem 1.1rem;
}

.shell-subscriber .wl-preview-card::after {
  display: none;
}

.shell-subscriber .wl-preview-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.85rem 0 0.75rem;
  min-height: 9rem;
}

.shell-subscriber .wl-preview-tile,
.shell-subscriber .wl-preview-tile-empty {
  aspect-ratio: 1;
  overflow: hidden;
  background: #120a18;
}

.shell-subscriber .wl-preview-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shell-subscriber .wl-preview-btn {
  display: inline-flex;
  min-height: 2.1rem;
  padding: 0.3rem 0.85rem;
  background: var(--wl-preview-primary, #8c4dff);
  color: #f4eff6;
}

.shell-subscriber .bill-option-current {
  box-shadow: inset 0 0 0 1px #39d6d0, var(--depth-1);
}

.shell-subscriber .bill-policy-fold {
  margin: 1rem 0 0;
  color: #b8afc1;
  font-size: 0.88rem;
}

.shell-subscriber .bill-policy-fold summary {
  cursor: pointer;
  color: #f4eff6;
}

.shell-subscriber .membership-studio .page-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.2rem;
}

@media (max-width: 880px) {
  .shell-subscriber .studio-reel {
    grid-auto-columns: minmax(78vw, 18rem);
  }

  .shell-subscriber .vault-tile-list {
    grid-template-columns: 1fr;
  }
}

.retention-board {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.retention-headline {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.retention-block,
.retention-danger {
  padding: 1rem 1.05rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mmv-lilac, #c9b8d4) 28%, transparent);
}

.retention-danger {
  border-color: color-mix(in srgb, var(--mmv-danger) 42%, transparent);
}

@media (max-width: 430px) {
  .retention-board .btn,
  .retention-board input,
  .retention-board select {
    width: 100%;
  }
}

.storage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(14rem, 42vw);
  margin-left: auto;
  padding: 0.28rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--mmv-turquoise, #39d6d0) 45%, transparent);
  border-radius: 999px;
  color: var(--mmv-text);
  text-decoration: none;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--mmv-surface) 80%, transparent);
}

.storage-chip:focus-visible {
  outline: 2px solid var(--mmv-turquoise, #39d6d0);
  outline-offset: 2px;
}

.storage-chip-meter {
  display: block;
  width: 2.6rem;
  height: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-border-strong) 70%, transparent);
}

.storage-chip-meter span {
  display: block;
  height: 100%;
  background: var(--mmv-turquoise, #39d6d0);
}

.storage-chip-high,
.storage-chip-full {
  border-color: color-mix(in srgb, var(--mmv-magenta) 50%, transparent);
}

.storage-risk-banner {
  margin-top: 1rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mmv-turquoise) 28%, var(--mmv-border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mmv-surface-2) 72%, transparent), var(--mmv-surface)),
    var(--mmv-surface);
  box-shadow:
    inset 2px 0 0 var(--mmv-turquoise),
    0 10px 28px color-mix(in srgb, var(--mmv-bg) 55%, transparent);
}

.storage-risk-high {
  border-color: color-mix(in srgb, var(--mmv-turquoise) 52%, var(--mmv-border));
  box-shadow:
    inset 3px 0 0 var(--mmv-turquoise),
    0 0 0 1px color-mix(in srgb, var(--mmv-turquoise) 20%, transparent),
    0 12px 30px color-mix(in srgb, var(--mmv-turquoise) 16%, transparent);
}

.storage-risk-high .storage-risk-percent-value {
  color: var(--mmv-turquoise);
}

.storage-risk-high .storage-risk-meter > span {
  box-shadow: 0 0 18px color-mix(in srgb, var(--mmv-turquoise) 42%, transparent);
}

.storage-risk-full {
  border-color: color-mix(in srgb, var(--mmv-turquoise) 68%, var(--mmv-border));
  box-shadow:
    inset 4px 0 0 var(--mmv-turquoise),
    0 0 0 1px color-mix(in srgb, var(--mmv-turquoise) 28%, transparent),
    0 14px 34px color-mix(in srgb, var(--mmv-turquoise) 20%, transparent);
}

.storage-risk-full .storage-risk-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--mmv-turquoise);
}

.storage-risk-full .storage-risk-percent-value {
  color: var(--mmv-turquoise);
}

.storage-risk-full .storage-risk-available {
  color: var(--mmv-text);
  font-weight: 600;
}

.storage-risk-full .storage-risk-meter > span {
  box-shadow: 0 0 22px color-mix(in srgb, var(--mmv-turquoise) 50%, transparent);
}

.storage-risk-label {
  margin: 0 0 0.55rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.storage-risk-hero {
  display: grid;
  gap: 0.15rem;
  margin: 0 0 0.7rem;
}

.storage-risk-percent {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.storage-risk-percent-value {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 560;
  line-height: 1;
  color: var(--mmv-text);
}

.storage-risk-percent-label,
.storage-risk-used,
.storage-risk-available,
.storage-risk-note {
  margin: 0;
  color: var(--mmv-text-secondary);
}

.storage-risk-used {
  color: var(--mmv-text);
  font-size: 1.02rem;
}

.storage-risk-available {
  font-size: 0.92rem;
}

.storage-risk-note {
  margin-top: 0.65rem;
  font-size: 0.9rem;
}

.storage-risk-meter {
  position: relative;
  height: 0.62rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-bg) 70%, var(--mmv-violet-deep));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f4eff6 8%, transparent);
}

.storage-risk-meter > span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--mmv-turquoise);
  box-shadow: 0 0 14px color-mix(in srgb, var(--mmv-turquoise) 32%, transparent);
}

.pu-meter.pu-approaching[data-usage-kind="storage"] .pu-track span {
  background: var(--mmv-turquoise);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mmv-turquoise) 28%, transparent);
}

.storage-risk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
}

.shell-subscriber .app-main-wrap {
  padding-bottom: 5.75rem;
}

.pu-storage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pu-storage-facts,
.pu-addon-block,
.pu-usage-span {
  grid-column: 1 / -1;
  min-width: 0;
}

.pu-storage-facts {
  grid-column: auto;
  align-self: start;
  padding: 0.15rem 0 0;
}

.pu-storage-facts .pu-meta {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pu-storage-inline {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
}

.pu-storage-inline a,
.pu-text-action {
  color: var(--mmv-text);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.pu-storage-inline a:hover,
.pu-storage-inline a:focus-visible,
.pu-text-action:hover,
.pu-text-action:focus-visible {
  color: var(--mmv-turquoise);
  outline: none;
}

.pu-addon-block {
  margin: 0.15rem 0 0.1rem;
  padding: 0.15rem 0 0.35rem;
}

.pu-addon-heading {
  margin: 0;
  font-size: 1.05rem;
}

.pu-addon-lede,
.pu-addon-rule {
  margin: 0.3rem 0 0;
  color: var(--mmv-text-secondary);
  font-size: 0.9rem;
}

.pu-addon-tiers {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-width: 36rem;
}

.pu-addon-tiers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.48rem 0.7rem;
  border: 1px solid color-mix(in srgb, #f4eff6 8%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #1d1026 92%, #2a1636);
}

.pu-addon-tiers li.is-active {
  border-color: color-mix(in srgb, var(--mmv-turquoise) 42%, transparent);
  box-shadow: inset 2px 0 0 var(--mmv-turquoise);
}

.pu-tier-copy,
.pu-addon-tiers span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pu-tier-flag {
  grid-column: 1;
  color: var(--mmv-turquoise);
  font-size: 0.75rem;
}

.pu-addon-tiers .btn {
  justify-self: end;
  min-height: 0;
  padding: 0.28rem 0.7rem;
  font-size: 0.85rem;
}

@media (max-width: 430px) {
  .pu-addon-tiers {
    max-width: 100%;
  }
  .pu-addon-tiers li {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 430px) {
  .storage-chip {
    max-width: 100%;
    margin: 0.35rem 0 0;
  }
  .storage-risk-banner,
  .pu-storage-actions,
  .storage-risk-actions {
    min-width: 0;
  }
  .storage-risk-actions .btn,
  .pu-storage-actions .btn {
    width: 100%;
    max-width: 100%;
  }
}

html:has(.portal-login-body),
.portal-login-body {
  min-height: 100dvh;
  margin: 0;
}
.portal-login-body {
  display: flex;
  flex-direction: column;
  background: #0c0712;
  --portal-aqua: #39d6d0;
}
.portal-login-body #main.portal-login,
.portal-login {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
}
.portal-login-shell {
  display: grid;
  grid-template-columns: minmax(17rem, 42%) minmax(20rem, 58%);
  min-height: 100dvh;
}
.portal-login-shell.is-unavailable {
  grid-template-columns: 1fr;
  place-items: center;
  padding: 1.5rem;
}
.portal-brand {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  background:
    radial-gradient(42% 36% at 86% 16%, color-mix(in srgb, var(--portal-aqua) 14%, transparent), transparent 62%),
    radial-gradient(80% 70% at 18% 18%, color-mix(in srgb, var(--mmv-violet) 38%, transparent), transparent 58%),
    radial-gradient(70% 60% at 88% 88%, color-mix(in srgb, var(--mmv-magenta) 16%, transparent), transparent 55%),
    linear-gradient(165deg, #1a0f24 0%, #0c0712 72%);
  border-right: 1px solid color-mix(in srgb, var(--portal-aqua) 22%, var(--mmv-border));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--portal-aqua) 55%, transparent);
}
.portal-brand::after {
  content: "";
  position: absolute;
  inset: auto 8% 12% 8%;
  height: 1px;
  background: color-mix(in srgb, var(--portal-aqua) 42%, transparent);
}
.portal-brand-inner { position: relative; z-index: 1; max-width: 28rem; }
.portal-eyebrow {
  margin: 0 0 0.45rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--portal-aqua) 78%, #f4eff6);
}
.portal-studio {
  margin: 0 0 0.7rem;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.12;
  font-weight: 650;
}
.portal-brand-lede,
.portal-auth .lede {
  max-width: 36rem;
  color: var(--mmv-text-secondary);
}
.portal-auth {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--mmv-surface) 70%, #0c0712);
}
.portal-auth-panel {
  width: min(28rem, 100%);
  padding: 1.6rem 1.45rem 1.35rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--mmv-surface) 92%, #000);
  border: 1px solid var(--mmv-border);
  box-shadow: 0 22px 50px color-mix(in srgb, #000 42%, transparent);
}
.portal-title {
  margin: 0 0 0.45rem;
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 650;
}
.portal-login-logo,
.portal-login-mark {
  display: inline-flex;
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--mmv-violet) 28%, #120a18);
  font-size: 1.55rem;
}
.portal-login-mark {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--portal-aqua) 48%, transparent),
    0 0 18px color-mix(in srgb, var(--portal-aqua) 16%, transparent);
}
.portal-auth-panel .field input:focus,
.portal-auth-panel .field input:focus-visible {
  outline: 2px solid var(--portal-aqua);
  outline-offset: 2px;
  border-color: var(--portal-aqua);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-aqua) 22%, transparent);
}
.portal-signin.btn-primary {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 1.15rem;
  border-radius: 6px;
  color: #f4eff6;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
    linear-gradient(180deg, #3b2068 0%, #1a0d2c 100%);
  border: 1px solid color-mix(in srgb, var(--mmv-violet) 52%, #f4eff6);
  box-shadow: var(--mmv-cta-rest);
}
.portal-signin.btn-primary:hover,
.portal-signin.btn-primary:focus-visible,
.portal-signin.btn-primary:active {
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--portal-aqua) 46%, var(--mmv-violet));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 1px color-mix(in srgb, var(--portal-aqua) 34%, transparent),
    0 12px 26px color-mix(in srgb, #8c4dff 28%, transparent);
}
.portal-forgot {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
}
.portal-or {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.15rem 0 0.85rem;
  color: var(--mmv-text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portal-or::before,
.portal-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--portal-aqua) 28%, var(--mmv-border));
}
.portal-or span {
  color: color-mix(in srgb, var(--portal-aqua) 55%, var(--mmv-text-secondary));
}
.portal-magic-toggle,
.portal-magic-panel .btn {
  width: 100%;
}
.portal-magic-toggle:hover,
.portal-magic-toggle:focus-visible,
.portal-magic-panel .btn:focus-visible {
  color: color-mix(in srgb, var(--portal-aqua) 70%, #f4eff6);
  border-color: color-mix(in srgb, var(--portal-aqua) 36%, var(--mmv-border));
  outline: 2px solid color-mix(in srgb, var(--portal-aqua) 55%, transparent);
  outline-offset: 2px;
}
.portal-magic-panel { margin-top: 0.7rem; }
.portal-help {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  opacity: 0.8;
}
.portal-help a:hover,
.portal-help a:focus-visible {
  color: color-mix(in srgb, var(--portal-aqua) 72%, #f4eff6);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--portal-aqua) 70%, transparent);
  outline: 2px solid transparent;
}
.portal-help a:focus-visible {
  outline: 2px solid var(--portal-aqua);
  outline-offset: 3px;
}
.portal-attribution {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--mmv-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .portal-signin.btn-primary {
    transition: none;
  }
  .portal-signin.btn-primary:hover,
  .portal-signin.btn-primary:focus-visible {
    transform: none;
  }
}
@media (max-width: 1023px) {
  .portal-login-shell {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }
  .portal-brand {
    align-items: center;
    min-height: 34vh;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--portal-aqua) 22%, var(--mmv-border));
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--portal-aqua) 45%, transparent);
    background:
      radial-gradient(48% 40% at 88% 8%, color-mix(in srgb, var(--portal-aqua) 10%, transparent), transparent 58%),
      radial-gradient(80% 70% at 18% 18%, color-mix(in srgb, var(--mmv-violet) 34%, transparent), transparent 58%),
      linear-gradient(165deg, #1a0f24 0%, #0c0712 72%);
  }
  .portal-auth { place-items: start center; padding-bottom: 2rem; }
}
@media (max-width: 430px) {
  .portal-login { max-width: 100%; padding: 0; }
  .portal-brand, .portal-auth { padding: 1.15rem 1rem 1.4rem; }
  .portal-auth-panel { padding: 1.2rem 1rem 1.1rem; }
  .portal-title { font-size: 1.35rem; }
}
.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.preview-studio-lede { max-width: 40rem; }
.preview-stage { overflow-x: auto; padding-bottom: 0.5rem; }
.preview-device-shell {
  margin: 0 auto;
  border: 1px solid var(--mmv-border);
  background: color-mix(in srgb, var(--mmv-surface) 88%, #000);
  overflow: hidden;
}
.preview-device-shell.is-desktop {
  max-width: 72rem;
  border-radius: 0.85rem;
}
.preview-device-shell.is-mobile {
  max-width: 24.375rem;
  border-radius: 1.7rem;
  padding-top: 0.35rem;
}
.preview-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, #120a18 82%, var(--mmv-violet));
  font-size: 0.82rem;
}
.preview-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mmv-text-secondary) 55%, transparent);
}
.preview-url {
  margin-left: 0.5rem;
  flex: 1;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #000 35%, transparent);
}
.preview-phone-notch {
  width: 5.5rem;
  height: 0.55rem;
  margin: 0.35rem auto 0.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, var(--mmv-border));
}
.portal-preview-device {
  margin: 0;
  padding: 1.1rem 1rem 1.4rem;
  min-height: 28rem;
  background: #120a18;
}
.preview-device-shell.is-mobile .portal-preview-device { min-height: 36rem; }
.portal-preview-flag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmv-turquoise) 22%, transparent);
  font-size: 0.78rem;
}
.preview-client-header {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin: 0.9rem 0 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--mmv-border);
}
.preview-studio-name {
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--mmv-text-secondary);
}
.preview-client-header h2 { margin: 0.15rem 0 0.1rem; }
.preview-empty {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 14rem;
  padding: 1.5rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--mmv-violet) 40%, var(--mmv-border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--mmv-violet) 8%, #120a18);
}
.preview-empty-title { margin: 0 0 0.35rem; font-size: 1.15rem; }
.preview-empty-brand { margin: 0.85rem 0 0; color: var(--mmv-text-secondary); }
.preview-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.preview-tile {
  margin: 0;
  padding: 0;
  border-radius: 0.7rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--mmv-surface) 70%, #000);
}
.preview-tile img,
.preview-video-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.preview-video-tile {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mmv-violet) 18%, #120a18);
}
.preview-tile strong,
.preview-tile-meta { display: block; padding: 0.35rem 0.5rem 0.15rem; font-size: 0.82rem; }
.preview-media { list-style: none; padding: 0; }
.wa-section h2 { margin-top: 0; }
.wa-url {
  word-break: break-word;
  padding: 0.7rem 0.85rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, #000 28%, var(--mmv-surface));
  border: 1px solid var(--mmv-border);
}
.wa-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wa-advanced {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mmv-border);
}
.wa-optional { opacity: 0.98; }
.wa-subhead { font-size: 1rem; margin: 0.4rem 0; }
.wa-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.7rem; }
.wa-chip { font-size: 0.88rem; }
.wa-fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.wa-site-mock {
  border: 1px solid var(--mmv-border);
  border-radius: 0.8rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--mmv-surface) 92%, #fff 4%);
}
.wa-site-mock-bar {
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, #120a18 70%, var(--mmv-violet));
}
.wa-site-mock-body {
  min-height: 6.5rem;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.wa-float-demo {
  display: inline-block;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--mmv-violet);
  color: var(--mmv-text);
  box-shadow: 0 0.4rem 1.2rem color-mix(in srgb, #000 45%, transparent);
}
.wa-code {
  overflow-x: auto;
  max-width: 100%;
  padding: 0.75rem;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-guide { border-bottom: 1px solid var(--mmv-border); padding: 0.35rem 0; }
.wa-guide summary { cursor: pointer; padding: 0.45rem 0; }
.wa-confirm { margin-top: 0.75rem; }
.wa-confirm[hidden] { display: none; }
.website-button-preview { margin: 0.8rem 0; }
@media (max-width: 430px) {
  .preview-toolbar .field,
  .preview-toolbar .btn,
  .wa-actions .btn { width: 100%; }
  .preview-device-shell.is-desktop { border-radius: 0.7rem; }
}

.media-console { overflow-x: clip; }
.media-page-head { margin-bottom: 0.45rem; }
.media-page-head .page-title { font-size: 1.35rem; margin: 0; }
.media-page-head .page-kicker { margin: 0 0 0.15rem; }
.media-toolbar-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: end;
  margin: 0 0 0.45rem;
}
.media-toolbar-compact .field { margin: 0; min-width: 8.5rem; }
.media-toolbar-compact .field input,
.media-toolbar-compact .field select { min-height: 2.05rem; }
.media-search-field { flex: 0 1 16rem; min-width: 10rem; max-width: 18rem; }
.media-org-toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem 0.65rem; align-items: end; flex: 1 1 22rem; }
.media-filter-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--mmv-border);
  border-radius: 0.55rem;
}
.media-gallery { padding: 0; background: transparent; border: 0; box-shadow: none; }
.media-gallery-stack { min-width: 0; }
.media-org-layout { margin: 0 0 0.4rem; }
.media-folder-rail {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
}
.media-folder-label {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mmv-text-muted);
  flex: 0 0 auto;
}
.media-folder-rail ul {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0.1rem 0;
  overflow-x: auto;
  flex: 1 1 auto;
}
.media-folder-rail form { display: flex; gap: 0.3rem; align-items: center; flex: 0 0 auto; }
.media-folder-rail form .field { margin: 0; }
.media-folder-rail form input { min-height: 1.85rem; width: 7.5rem; }
.media-folder-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--mmv-border) 80%, transparent);
  background: color-mix(in srgb, var(--layer-1) 70%, transparent);
  color: var(--mmv-text-secondary);
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font: inherit;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
}
.media-folder-chip.is-current {
  border-color: color-mix(in srgb, #39d6d0 55%, var(--mmv-border));
  color: var(--mmv-text);
  box-shadow: 0 0 0 1px color-mix(in srgb, #39d6d0 35%, transparent);
}
.media-folder-chip:focus-visible { outline: 2px solid var(--mmv-focus); outline-offset: 2px; }
.media-status-chip {
  min-height: 0;
  font-size: 0.62rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
}
.media-flags { gap: 0.2rem; }
.media-tag-row { display: flex; flex-wrap: wrap; gap: 0.22rem; margin-top: 0.18rem; }
.media-tag-chip {
  display: inline-block;
  padding: 0.04rem 0.36rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #8c4dff 28%, var(--mmv-border));
  color: color-mix(in srgb, var(--mmv-text-secondary) 85%, #8c4dff);
  font-size: 0.6rem;
  letter-spacing: 0.01em;
}
.media-bulk-bar {
  position: sticky; bottom: 0.55rem; z-index: 5;
  display: flex; flex-wrap: nowrap; gap: 0.45rem; align-items: center;
  margin: 0.5rem 0 0; padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in srgb, #39d6d0 28%, var(--mmv-border));
  border-radius: 0.7rem;
  background: color-mix(in srgb, #140c18 88%, transparent);
  overflow-x: auto;
}
.media-bulk-actions { display: flex; flex-wrap: nowrap; gap: 0.3rem; }
.media-bulk-bar .btn { flex: 0 0 auto; min-height: 2rem; padding: 0.25rem 0.65rem; font-size: 0.78rem; }
.media-bulk-delete { margin-left: 0.35rem; border-color: color-mix(in srgb, #e35b7a 45%, var(--mmv-border)); color: #ffb3c4; }
.media-grid .media-tile.is-selected {
  outline: 2px solid #39d6d0;
  box-shadow: 0 0 0 3px color-mix(in srgb, #39d6d0 28%, transparent);
}
.media-select-row { margin: 0 0 0.35rem; font-size: 0.78rem; }
.media-tile-select { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 2; }
.media-tile-select input { width: 1rem; height: 1rem; accent-color: #39d6d0; }
.media-grid li { position: relative; }
.shell-subscriber .media-toolbar { margin-bottom: 0.4rem; }
.shell-subscriber .media-grid { grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr)); gap: 0.35rem; }
.shell-subscriber .usage-line { margin: 0 0 0.4rem; font-size: 0.78rem; }
.shell-subscriber .media-card-copy { padding: 0.32rem 0.42rem; }
@media (min-width: 1280px) {
  .shell-subscriber .media-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
}
@media (max-width: 880px) {
  .shell-subscriber .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .shell-subscriber .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .shell-subscriber .media-grid { grid-template-columns: 1fr; }
}
.notify-wrap { position: relative; flex: 0 0 auto; }
.notify-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, #f4eff6 16%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
}
.notify-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.05rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #39d6d0;
  color: #120a18;
  font-size: 0.65rem;
  line-height: 1.15rem;
  text-align: center;
}
.notify-root {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.notify-scrim {
  position: absolute;
  inset: 0;
  background: rgb(18 10 24 / 0.42);
}
.notify-drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  height: 100%;
  background: #160c1e;
  border-left: 1px solid color-mix(in srgb, #f4eff6 12%, transparent);
  box-shadow: -16px 0 40px rgb(8 4 12 / 0.35);
}
.notify-drawer-head, .notify-drawer-foot { padding: 1rem 1rem 0.75rem; }
.notify-drawer-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.notify-drawer-head h2 { margin: 0; font-size: 1.05rem; }
.notify-unread { margin: 0.2rem 0 0; color: #b8afc1; font-size: 0.85rem; }
.notify-drawer-actions { display: flex; gap: 0.4rem; align-items: center; }
.notify-close {
  width: 2.2rem;
  min-height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
}
.notify-drawer-body { flex: 1; overflow: auto; padding: 0 0.55rem 0.75rem; }
.notify-group h3 { margin: 0.45rem 0.35rem 0.1rem; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: #b8afc1; }
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-item {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr) 0.5rem;
  gap: 0.35rem;
  align-items: start;
  min-height: 2.25rem;
  padding: 0.35rem 0.35rem;
  border-radius: 0.45rem;
  color: inherit;
  text-decoration: none;
}
.notify-item.is-unread { background: color-mix(in srgb, #39d6d0 8%, transparent); font-weight: 600; }
.notify-item .notify-dot { width: 0.38rem; height: 0.38rem; margin-top: 0.38rem; border-radius: 999px; background: transparent; }
.notify-item.is-unread .notify-dot { background: #39d6d0; }
.notify-icon { display: flex; align-items: flex-start; padding-top: 0.12rem; color: #8c4dff; }
.notify-glyph { display: block; }
.notify-copy { display: grid; gap: 0.05rem; }
.notify-copy time { color: #b8afc1; font-size: 0.75rem; font-weight: 400; white-space: nowrap; }
.notify-empty { padding: 1rem 0.5rem; color: #b8afc1; }
.notify-drawer-foot { border-top: 1px solid color-mix(in srgb, #f4eff6 10%, transparent); }
.notify-drawer-foot a { color: #39d6d0; }
body.notify-open { overflow: hidden; }
body.notify-open .mmv-chat { visibility: hidden; pointer-events: none; }
[data-activity-board] time { color: #b8afc1; white-space: nowrap; }
.activity-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.activity-filters button[aria-pressed="true"] { border-color: #39d6d0; color: #39d6d0; }
.activity-panel { margin-top: 0.9rem; }
.activity-panel ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.activity-panel li { padding: 0.25rem 0; }
@media (max-width: 640px) {
  .notify-drawer { width: 100vw; }
}
@media (max-width: 430px) {
  .media-bulk-bar { bottom: 4.6rem; }
  .media-folder-rail { flex-wrap: wrap; }
  .media-folder-rail form { width: 100%; }
}
.vault-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.vault-page-head .page-title { margin-bottom: 0; }
.vault-create-workspace { position: relative; margin: 0 0 1rem; padding: 0.85rem 0.95rem 0; border: 1px solid var(--mmv-border-strong); border-radius: 0.75rem; background: color-mix(in srgb, var(--mmv-surface) 90%, transparent); max-width: 72rem; }
.vault-create-head { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.8rem; align-items: start; }
.vault-create-head h2 { margin: 0; }
.vault-create-head .template-picker-help { grid-column: 1; margin: 0; }
.vault-create-head [data-close-create] { grid-column: 2; grid-row: 1 / span 2; }
.vault-create-grid { display: grid; gap: 1rem; padding: 0.75rem 0 0; }
.vault-create-setup { min-width: 0; }
.template-picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.template-picker legend { font-weight: 600; }
.template-picker-help, .field-note { margin: 0.35rem 0 0.65rem; color: var(--mmv-text-secondary); font-size: 0.875rem; }
.template-cats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0.5rem; }
.template-cats button { border: 1px solid var(--mmv-border-strong); background: transparent; color: inherit; border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.82rem; }
.template-cats button[aria-selected="true"] { border-color: #39d6d0; color: #39d6d0; box-shadow: inset 0 0 0 1px #39d6d0; }
.template-cards { display: grid; gap: 0.35rem; }
.template-card { display: block; width: 100%; text-align: left; border: 1px solid var(--mmv-border-strong); background: color-mix(in srgb, var(--mmv-surface) 88%, transparent); color: inherit; border-radius: 0.45rem; padding: 0.4rem 0.55rem; }
.template-card[aria-selected="true"] { outline: 2px solid #39d6d0; outline-offset: 1px; }
.template-card strong { display: block; font-size: 0.92rem; }
.template-card small { display: block; color: var(--mmv-text-secondary); font-size: 0.75rem; line-height: 1.3; }
.template-badge { display: inline-block; margin-left: 0.35rem; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; color: #39d6d0; }
.template-preview { margin: 0 0 0.75rem; }
.template-preview h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.template-preview p { margin: 0.2rem 0; font-size: 0.88rem; }
.checkbox-field { display: flex; align-items: center; gap: 0.45rem; }
.vault-create-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.65rem 0 0.85rem; margin-top: 0.25rem; background: color-mix(in srgb, var(--mmv-surface) 96%, transparent); border-top: 1px solid var(--mmv-border-strong); }
.vault-create-actions-row { display: flex; gap: 0.45rem; margin-left: auto; }
body.vault-create-open .mmv-chat { visibility: hidden; pointer-events: none; }
@media (min-width: 768px) {
  .vault-create-grid { grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 20rem); align-items: start; }
  .template-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
  .vault-create-workspace { max-width: none; }
  .vault-create-grid { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 24rem); }
}
@media (max-width: 767px) {
  .template-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.2rem; }
  .template-cards { grid-template-columns: 1fr; }
  .vault-create-workspace { padding-bottom: 0.25rem; }
}