:root {
  color-scheme: dark;
  --mk-color-navy: #0f1f2e;
  --mk-color-red: #d7263e;
  --mk-color-red-hover: #e03a50;
  --mk-color-white: #f7f7f5;
  --mk-color-warm: #f2c94c;
  --mk-color-warn: #f2c94c;
  --mk-color-down: #f85149;
  --mk-color-up: #3fb950;
  --mk-danger: #f85149;
  --mk-success: #3fb950;
  --mk-bg: var(--mk-color-navy);
  --mk-bg-elev: #142738;
  --mk-bg-elev-2: #1b3144;
  --mk-surface: #183144;
  --mk-text: var(--mk-color-white);
  --mk-text-muted: #b8c6cf;
  --mk-border: #315164;
  --mk-focus: var(--mk-color-warm);
  --mk-radius-sm: 6px;
  --mk-radius-md: 10px;
  --mk-radius-lg: 16px;
  --mk-radius-pill: 999px;
  --mk-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35);
  --mk-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.24);
  --mk-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mk-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mk-font-size-xs: 12px;
  --mk-font-size-sm: 14px;
  --mk-font-size-md: 16px;
  --mk-font-size-lg: 18px;
  --mk-font-size-h3: 24px;
  --mk-font-size-h2: 34px;
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 24px;
  --mk-space-6: 32px;
  --mk-space-7: 48px;
  --mk-duration-instant: 90ms;
  --mk-duration-fast: 140ms;
  --mk-duration-normal: 220ms;
  --mk-duration-slow: 320ms;
  --mk-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mk-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --mk-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --mk-motion-lift: translateY(-2px);
  --mk-motion-press: translateY(0) scale(0.98);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --mk-bg: #f3f6f8;
    --mk-bg-elev: #ffffff;
    --mk-bg-elev-2: #edf2f6;
    --mk-surface: #ffffff;
    --mk-text: #112433;
    --mk-text-muted: #4f6675;
    --mk-border: #c3d0d8;
    --mk-shadow-1: 0 1px 3px rgba(15, 31, 46, 0.1);
    --mk-shadow-2: 0 8px 24px rgba(15, 31, 46, 0.12);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: var(--mk-font-size-sm);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--mk-color-red);
  text-decoration: none;
  transition: color var(--mk-duration-fast) var(--mk-ease-standard);
}
a:hover {
  color: var(--mk-color-red-hover);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--mk-focus);
  outline-offset: 2px;
}

.mk-app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.mk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mk-space-4);
  padding: var(--mk-space-3) var(--mk-space-5);
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-bg-elev);
  box-shadow: var(--mk-shadow-1);
}

.mk-topbar-public {
  background: #ffffff;
  border-top: 2px solid #2f96dc;
  border-bottom: 1px solid #e7edf2;
  box-shadow: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.mk-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-3);
}

.mk-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.mk-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-weight: 700;
  font-family: var(--mk-font-serif);
  font-size: var(--mk-font-size-lg);
  letter-spacing: 0.02em;
}

.mk-nav {
  display: flex;
  gap: var(--mk-space-4);
}
.mk-nav-public {
  flex: 1;
  justify-content: center;
  gap: 22px;
}
.mk-nav a {
  color: var(--mk-text);
  font-weight: 600;
  font-size: 13px;
  transition: color var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-nav a.active {
  color: var(--mk-color-red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}

.mk-main {
  padding: var(--mk-space-5);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.mk-card {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-4);
  box-shadow: var(--mk-shadow-1);
  margin-bottom: var(--mk-space-4);
  transition:
    border-color var(--mk-duration-normal) var(--mk-ease-standard),
    background-color var(--mk-duration-normal) var(--mk-ease-standard),
    box-shadow var(--mk-duration-normal) var(--mk-ease-standard),
    transform var(--mk-duration-normal) var(--mk-ease-enter);
}

.mk-card:hover {
  box-shadow: var(--mk-shadow-2);
}

.mk-footer {
  padding: var(--mk-space-3) var(--mk-space-5);
  border-top: 1px solid var(--mk-border);
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-xs);
  text-align: center;
}

.mk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  min-height: 38px;
  padding: var(--mk-space-2) var(--mk-space-4);
  background: var(--mk-color-red);
  color: var(--mk-color-white);
  border: 1px solid transparent;
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
  font-size: var(--mk-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(0) scale(1);
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter),
    opacity var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-topbar-public .mk-button {
  min-height: 36px;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  text-transform: uppercase;
}
.mk-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mk-button:hover:not(:disabled) {
  background: var(--mk-color-red-hover);
  box-shadow: 0 5px 14px rgba(215, 38, 62, 0.22);
  transform: var(--mk-motion-lift);
}

.mk-button:active:not(:disabled) {
  box-shadow: none;
  transform: var(--mk-motion-press);
}

.mk-input {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: var(--mk-space-2) var(--mk-space-3);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  background: var(--mk-bg);
  color: var(--mk-text);
  font-size: var(--mk-font-size-sm);
  transition: border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-input:focus {
  border-color: var(--mk-focus);
  box-shadow: 0 0 0 2px rgba(242, 201, 76, 0.2);
}

.mk-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mk-border);
  border-top-color: var(--mk-color-warm);
  border-radius: 50%;
  animation: mk-spin 0.8s linear infinite;
}

@keyframes mk-spin {
  to {
    transform: rotate(360deg);
  }
}

.mk-error {
  color: #ffd8d6;
  padding: var(--mk-space-2) var(--mk-space-3);
  border: 1px solid var(--mk-danger);
  border-radius: var(--mk-radius-sm);
  background: rgba(248, 81, 73, 0.08);
  margin-bottom: var(--mk-space-3);
}

.mk-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-3);
}
.mk-topbar-user-public {
  gap: 10px;
}

.mk-icon-btn {
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
  background: transparent;
  color: var(--mk-text-muted);
  min-width: 30px;
  min-height: 30px;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
  transform: translateY(0) scale(1);
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter);
}

.mk-icon-btn:hover {
  color: var(--mk-text);
  background: var(--mk-bg-elev-2);
  border-color: color-mix(in srgb, var(--mk-border) 58%, var(--mk-text));
  transform: var(--mk-motion-lift);
}

.mk-icon-btn:active {
  transform: var(--mk-motion-press);
}

.mk-user-chip {
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-sm);
  background: var(--mk-bg-elev-2);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
  padding: var(--mk-space-1) var(--mk-space-3);
}

.mk-topbar-public .mk-brand-wrap {
  min-width: 170px;
}

.mk-topbar-public .mk-nav a {
  color: #1f2f3d;
}

.mk-topbar-public .mk-icon-btn {
  color: #536272;
  border-color: #d6e1ea;
}

.mk-brand-dot {
  color: var(--mk-color-red);
}

.mk-input-label {
  display: block;
  margin-bottom: var(--mk-space-2);
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-sm);
}

.mk-hint {
  display: block;
  margin-top: var(--mk-space-1);
  color: var(--mk-text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

.mk-form-gap-sm {
  height: var(--mk-space-3);
}

.mk-form-gap-md {
  height: var(--mk-space-4);
}

.mk-login-card {
  max-width: 460px;
  margin: 72px auto;
}

.mk-hero-card {
  max-width: 880px;
  margin: var(--mk-space-5) auto;
  padding: var(--mk-space-6);
}

.mk-actions-row {
  display: flex;
  gap: var(--mk-space-3);
  flex-wrap: wrap;
  margin-top: var(--mk-space-3);
}

.mk-button-secondary {
  background: transparent;
  color: var(--mk-text);
  border-color: var(--mk-border);
}

.mk-button-secondary:hover:not(:disabled) {
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
}

/* The generic .mk-button:disabled halves opacity, which is nearly invisible
   for the already-subtle secondary/outline variant on dark cards. Keep full
   opacity and fall back to the muted (still ≥4.5:1) text color instead. */
.mk-button-secondary:disabled {
  opacity: 1;
  color: var(--mk-text-muted);
  border-color: var(--mk-border);
  background: transparent;
}

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

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

.mk-table th,
.mk-table td {
  padding: var(--mk-space-2);
  border-bottom: 1px solid var(--mk-border);
  text-align: left;
  font-size: var(--mk-font-size-sm);
}

.mk-table th {
  color: var(--mk-text-muted);
  font-weight: 600;
}

.mk-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--mk-space-2) var(--mk-space-4);
  align-items: baseline;
}

.mk-center {
  text-align: center;
}

.mk-page-header {
  margin-bottom: var(--mk-space-5);
}

.mk-page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mk-space-4);
}

.mk-success {
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.4);
  color: #d5f5dc;
  padding: var(--mk-space-3) var(--mk-space-4);
  border-radius: var(--mk-radius-md);
  margin-bottom: var(--mk-space-4);
  font-size: var(--mk-font-size-sm);
}

.mk-button-sm {
  padding: var(--mk-space-1) var(--mk-space-2);
  font-size: var(--mk-font-size-sm);
  cursor: pointer;
}

.mk-button-inline-gap {
  margin-left: var(--mk-space-3);
}

.mk-actions-inline {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  white-space: nowrap;
}

.mk-page-title-cell {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
}

.mk-page-title-cell.is-child {
  padding-left: var(--mk-space-5);
}

.mk-page-tree-branch {
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-sm);
  line-height: 1;
}

.mk-page-subtitle {
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-md);
}

.mk-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--mk-radius-pill);
  padding: 2px var(--mk-space-2);
  font-size: var(--mk-font-size-xs);
  border: 1px solid var(--mk-border);
  background: var(--mk-bg-elev-2);
}

.mk-status-pill-up {
  border-color: rgba(63, 185, 80, 0.45);
  color: #d5f5dc;
  background: rgba(63, 185, 80, 0.12);
}

.mk-status-pill-down {
  border-color: rgba(248, 81, 73, 0.5);
  color: #ffd8d6;
  background: rgba(248, 81, 73, 0.14);
}

.mk-status-pill-neutral {
  border-color: var(--mk-border);
  color: var(--mk-text-muted, #8b949e);
  background: var(--mk-bg-elev-2);
}

.mk-status-pill-warn {
  border-color: rgba(242, 201, 76, 0.5);
  color: #ffe9a8;
  background: rgba(242, 201, 76, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ——— Public marketing site (Figma-aligned) ——— */
body.mk-body-public {
  background: #f5f6f8;
  color: #1f2f3d;
}

.mk-app-public .mk-footer {
  background: #ffffff;
  border-top-color: #e7edf2;
  color: #6b7c8c;
}

.mk-main-public {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.mk-landing {
  width: 100%;
}

.mk-hero {
  position: relative;
  min-height: 260px;
  max-height: 320px;
  background-color: #0f1f2e;
  background-size: cover;
  background-position: center 28%;
  overflow: hidden;
}

.mk-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 31, 46, 0.76) 0%,
    rgba(15, 31, 46, 0.38) 42%,
    rgba(15, 31, 46, 0.18) 100%
  );
}

.mk-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px var(--mk-space-5) 28px;
  color: #f7f7f5;
}

.mk-hero-brand {
  margin: 0 0 var(--mk-space-2);
  font-family: var(--mk-font-serif);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.mk-hero-tagline {
  margin: 0 0 var(--mk-space-4);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.92;
}

.mk-hero-lead {
  margin: 0 0 var(--mk-space-5);
  max-width: 36rem;
  font-size: var(--mk-font-size-md);
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.92);
}

.mk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-3);
}

.mk-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 var(--mk-space-5);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 2px solid transparent;
  transform: translateY(0) scale(1);
  transition:
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter);
}

.mk-btn-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.mk-btn-hero-primary {
  background: var(--mk-color-red);
  color: #fff;
  border-color: var(--mk-color-red);
}

.mk-btn-hero-primary:hover {
  background: var(--mk-color-red-hover);
  border-color: var(--mk-color-red-hover);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(215, 38, 62, 0.25);
  transform: var(--mk-motion-lift);
}

.mk-btn-hero-outline {
  background: rgba(255, 255, 255, 0.96);
  color: #1f2f3d;
  border-color: #1f2f3d;
}

.mk-btn-hero-outline:hover {
  background: #fff;
  text-decoration: none;
  box-shadow: var(--mk-shadow-1);
  transform: var(--mk-motion-lift);
}

.mk-btn-hero:active {
  box-shadow: none;
  transform: var(--mk-motion-press);
}

.mk-landing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-space-6);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--mk-space-6) var(--mk-space-5) var(--mk-space-7);
}

@media (min-width: 1024px) {
  .mk-landing-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

.mk-section {
  margin-bottom: var(--mk-space-7);
}

.mk-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mk-space-4);
  margin-bottom: var(--mk-space-4);
}

.mk-section-head-tight {
  margin-bottom: var(--mk-space-3);
}

.mk-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1f2f3d;
}

.mk-section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-color-red);
  white-space: nowrap;
}

.mk-section-link:hover {
  color: var(--mk-color-red-hover);
}

.mk-video-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--mk-space-4);
}

.mk-video-card {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 31, 46, 0.06);
  transform: translateY(0);
  transition:
    border-color var(--mk-duration-normal) var(--mk-ease-standard),
    box-shadow var(--mk-duration-normal) var(--mk-ease-standard),
    transform var(--mk-duration-normal) var(--mk-ease-enter);
}

.mk-video-card:hover {
  box-shadow: var(--mk-shadow-2);
  transform: var(--mk-motion-lift);
}

.mk-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #3a5f73 0%, #0f1f2e 100%);
}

.mk-video-duration {
  position: absolute;
  bottom: var(--mk-space-2);
  right: var(--mk-space-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
}

.mk-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.mk-video-title {
  margin: var(--mk-space-3) var(--mk-space-3) var(--mk-space-1);
  font-size: 14px;
  font-weight: 600;
  color: #1f2f3d;
  line-height: 1.35;
}

.mk-video-meta {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--mk-space-3) var(--mk-space-3);
  font-size: 12px;
  color: #6b7c8c;
}

.mk-shorts-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--mk-space-3);
}

.mk-short-card {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
}

.mk-short-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  background: linear-gradient(180deg, #5a7d8f 0%, #1b3144 100%);
}

.mk-short-views {
  position: absolute;
  bottom: var(--mk-space-2);
  left: var(--mk-space-2);
  right: var(--mk-space-2);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.mk-short-title {
  margin: 0;
  padding: var(--mk-space-2);
  font-size: 11px;
  font-weight: 600;
  color: #1f2f3d;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-widget {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-4);
  margin-bottom: var(--mk-space-4);
  box-shadow: 0 1px 2px rgba(15, 31, 46, 0.05);
}

.mk-widget-head {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-bottom: var(--mk-space-3);
}

.mk-widget-icon {
  font-size: 18px;
}

.mk-widget-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1f2f3d;
}

.mk-widget-date {
  margin: 0 0 var(--mk-space-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--mk-color-red);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mk-widget-quote {
  margin: 0 0 var(--mk-space-3);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: #3d4f5f;
  border: none;
  padding: 0;
}

.mk-audio-mock {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  margin-bottom: var(--mk-space-3);
}

.mk-audio-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--mk-color-red);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.mk-audio-wave {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  background: repeating-linear-gradient(
    90deg,
    rgba(215, 38, 62, 0.35) 0 3px,
    transparent 3px 6px
  );
}

.mk-widget-foot {
  display: flex;
  gap: var(--mk-space-4);
  font-size: 13px;
  font-weight: 600;
}

.mk-widget-foot a {
  color: #536272;
}

.mk-widget-input {
  margin-bottom: var(--mk-space-3);
}

.mk-widget-submit {
  width: 100%;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: var(--mk-space-2);
}

.mk-widget-hint {
  margin: var(--mk-space-3) 0 0;
  font-size: 12px;
  color: #6b7c8c;
}

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

.mk-blog-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--mk-space-3);
  padding: var(--mk-space-3) 0;
  border-bottom: 1px solid #eef2f5;
}

.mk-blog-item:last-child {
  border-bottom: none;
}

.mk-blog-thumb {
  width: 72px;
  height: 56px;
  border-radius: 6px;
  background: linear-gradient(135deg, #c8d6e0 0%, #3a5f73 100%);
}

.mk-blog-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2f3d;
}

.mk-blog-meta {
  margin: 0 0 4px;
  font-size: 12px;
  color: #6b7c8c;
}

.mk-blog-snippet {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #536272;
}

.mk-landing-strip {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--mk-space-5);
  border-top: 1px solid #e7edf2;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-4);
}

.mk-strip-text {
  margin: 0;
  max-width: 48ch;
  font-size: 13px;
  color: #536272;
}

.mk-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-3);
}

body.mk-body-public .mk-button-secondary {
  background: #fff;
  color: #1f2f3d;
  border-color: #c3d0d8;
}

body.mk-body-public .mk-input,
body.mk-body-public select.mk-input {
  background: #fff;
  color: #1f2f3d;
  border-color: #d6e1ea;
}

/* ——— CMS Sites / Pages admin ——— */

.mk-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--mk-space-3);
  margin-bottom: var(--mk-space-3);
  border-bottom: 1px solid var(--mk-border);
  font-weight: 600;
  font-size: var(--mk-font-size-sm);
}

.mk-clickable {
  cursor: pointer;
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter);
}

.mk-clickable:hover {
  background: var(--mk-bg-elev-2);
}

.mk-clickable:active {
  transform: scale(0.995);
}

.mk-empty {
  text-align: center;
  padding: var(--mk-space-6) var(--mk-space-4);
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-md);
}

.mk-text-muted {
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-xs);
}

code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  background: var(--mk-bg-elev-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--mk-border);
}

/* ——— Block Canvas & Page Editor ——— */
.mk-block-canvas { display: flex; flex-direction: column; gap: var(--mk-space-3); }
.mk-block-card { background: var(--mk-bg-elev); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); overflow: hidden; transition: border-color var(--mk-duration-normal) var(--mk-ease-standard), box-shadow var(--mk-duration-normal) var(--mk-ease-standard), transform var(--mk-duration-normal) var(--mk-ease-enter); }
.mk-block-card:hover { border-color: color-mix(in srgb, var(--mk-border) 72%, var(--mk-text)); box-shadow: var(--mk-shadow-1); transform: var(--mk-motion-lift); }
.mk-block-header { display: flex; align-items: center; justify-content: space-between; padding: var(--mk-space-3) var(--mk-space-4); background: var(--mk-bg-elev-2); border-bottom: 1px solid var(--mk-border); }
.mk-block-type { display: flex; align-items: center; gap: var(--mk-space-2); font-size: var(--mk-font-size-sm); }
.mk-block-type-icon { font-size: 16px; }
.mk-block-actions { display: flex; gap: var(--mk-space-1); }
.mk-block-preview { padding: var(--mk-space-3) var(--mk-space-4); }
.mk-block-json { font-family: monospace; font-size: 11px; line-height: 1.5; color: var(--mk-text-muted); background: var(--mk-bg); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); padding: var(--mk-space-3); margin: 0; overflow-x: auto; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.mk-block-editor { padding: var(--mk-space-4); background: var(--mk-bg); border-top: 1px solid var(--mk-border); }
.mk-block-textarea { font-family: monospace; font-size: 12px; line-height: 1.5; resize: vertical; min-height: 120px; }
.mk-block-type-picker { display: flex; flex-wrap: wrap; gap: var(--mk-space-2); margin-bottom: var(--mk-space-2); }
.mk-block-type-btn { display: inline-flex; align-items: center; gap: var(--mk-space-1); padding: var(--mk-space-2) var(--mk-space-3); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: var(--mk-bg-elev); color: var(--mk-text); font-size: var(--mk-font-size-sm); cursor: pointer; transform: translateY(0) scale(1); transition: color var(--mk-duration-fast) var(--mk-ease-standard), background-color var(--mk-duration-fast) var(--mk-ease-standard), border-color var(--mk-duration-fast) var(--mk-ease-standard), transform var(--mk-duration-fast) var(--mk-ease-enter); }
.mk-block-type-btn:hover { background: var(--mk-bg-elev-2); border-color: var(--mk-focus); }
.mk-block-type-btn:active { transform: var(--mk-motion-press); }
.mk-block-type-btn-active { background: var(--mk-bg-elev-2); border-color: var(--mk-color-red); color: var(--mk-danger); font-weight: 600; }

/* ——— Block Form Editors ——— */
.mk-block-form { display: flex; flex-direction: column; gap: var(--mk-space-2); }
.mk-block-form-fallback { padding: var(--mk-space-4); text-align: center; color: var(--mk-text-muted); }

.mk-field { margin-bottom: var(--mk-space-2); }
.mk-field .mk-input { margin-top: var(--mk-space-1); }
.mk-field .mk-input-label { margin-bottom: var(--mk-space-1); }

.mk-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mk-space-3); }
.mk-field-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
  .mk-field-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.mk-field-row { display: flex; gap: var(--mk-space-4); flex-wrap: wrap; align-items: flex-start; }
.mk-field-row .mk-field { margin-bottom: 0; }

/* Simple portfolio block editor */
.mk-simple-block-form { display: flex; flex-direction: column; gap: var(--mk-space-4); }
.mk-simple-block-form-kind { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-3); padding: 10px 12px; border: 1px solid rgba(255, 0, 144, 0.28); border-radius: var(--mk-radius-sm); background: linear-gradient(110deg, rgba(255, 0, 144, 0.10), rgba(75, 61, 255, 0.08)); }
.mk-simple-block-form-kind span { color: var(--mk-color-red); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.mk-simple-block-form-kind strong { color: var(--mk-text); font-size: 12px; text-align: right; }
.mk-simple-media-editor,
.mk-simple-collection-editor,
.mk-simple-carousel-settings { display: flex; flex-direction: column; gap: var(--mk-space-3); padding: var(--mk-space-3); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255, 255, 255, .025); }
.mk-simple-media-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-3); }
.mk-simple-media-editor-head strong { color: var(--mk-text); font-size: 13px; }
.mk-simple-video-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: #050816; object-fit: cover; }
.mk-simple-asset-row { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) 28px; align-items: start; gap: var(--mk-space-3); padding: var(--mk-space-3); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: rgba(0, 0, 0, .16); }
.mk-simple-asset-preview { display: grid; width: 88px; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: #050816; color: var(--mk-text-muted); font-size: 10px; font-weight: 800; }
.mk-simple-asset-preview.is-video { aspect-ratio: 9 / 16; }
.mk-simple-asset-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-simple-asset-fields { min-width: 0; }
.mk-simple-asset-fields .mk-field:last-child { margin-bottom: 0; }
.mk-simple-asset-row > .mk-icon-btn { width: 28px; height: 28px; color: var(--mk-text-muted); }
.mk-simple-carousel-settings .mk-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 430px) {
  .mk-simple-asset-row { grid-template-columns: 64px minmax(0, 1fr) 28px; padding: 10px; }
  .mk-simple-asset-preview { width: 64px; }
  .mk-simple-asset-fields .mk-actions-row { flex-direction: column; }
}

.mk-field-toggle { display: flex; align-items: center; gap: var(--mk-space-2); }
.mk-field-toggle .mk-input-label { margin-bottom: 0; }

.mk-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 24px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-border);
  background: var(--mk-bg);
  color: var(--mk-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-toggle-on {
  background: var(--mk-color-red);
  border-color: var(--mk-color-red);
  color: #fff;
}
.mk-toggle-on::after { content: "✓"; }

/* ——— Array Items (gallery images, features, testimonials, etc.) ——— */
.mk-array-item {
  background: var(--mk-bg);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  padding: var(--mk-space-3);
  margin-bottom: var(--mk-space-2);
}
.mk-array-item-featured {
  border-color: var(--mk-color-warm);
  background: rgba(242, 201, 76, 0.05);
}

.mk-array-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mk-space-2);
  padding-bottom: var(--mk-space-2);
  border-bottom: 1px solid var(--mk-border);
}
.mk-array-item-idx {
  font-weight: 600;
  font-size: var(--mk-font-size-xs);
  color: var(--mk-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mk-array-item-head-actions {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
}

/* ——— Block Summary (compact preview) ——— */
.mk-block-summary {
  display: block;
  font-size: var(--mk-font-size-sm);
  color: var(--mk-text-muted);
  padding: var(--mk-space-2) var(--mk-space-3);
  line-height: 1.5;
}

/* ——— Editor Toolbar ——— */
.mk-block-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mk-space-2);
}

/* ——— Case chapter marker (optional per-block divider fields) ——— */
.mk-case-chapter-fields {
  margin-bottom: var(--mk-space-3);
  padding: var(--mk-space-3);
  border: 1px dashed var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.mk-case-chapter-fields > .mk-input-label {
  margin-bottom: var(--mk-space-1);
}
.mk-case-chapter-fields .mk-block-editor-hint {
  display: block;
  margin: var(--mk-space-1) 0 var(--mk-space-2);
}
.mk-block-editor-label {
  font-size: var(--mk-font-size-xs);
  color: var(--mk-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ——— Small Button ——— */
.mk-button-sm {
  min-height: 30px;
  padding: var(--mk-space-1) var(--mk-space-3);
  font-size: var(--mk-font-size-xs);
}

/* ——— Button Group & Active ——— */
.mk-button-group {
  display: inline-flex;
  gap: 0;
}

.mk-button-group .mk-button {
  border-radius: 0;
}

.mk-button-group .mk-button:first-child {
  border-radius: var(--mk-radius-md) 0 0 var(--mk-radius-md);
}

.mk-button-group .mk-button:last-child {
  border-radius: 0 var(--mk-radius-md) var(--mk-radius-md) 0;
}

.mk-button-active {
  background: var(--mk-accent);
  color: #fff;
  border-color: var(--mk-accent);
}

/* ——— Analytics Stats Grid ——— */
.mk-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mk-space-3);
  margin-bottom: var(--mk-space-4);
}

.mk-stat-card {
  background: var(--mk-bg-elev);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-4);
  text-align: center;
}

.mk-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--mk-text);
  line-height: 1.2;
}

.mk-stat-label {
  font-size: var(--mk-font-size-sm);
  color: var(--mk-text-muted);
  margin-top: var(--mk-space-1);
}

/* ——— Bar Chart ——— */
.mk-chart-container {
  padding: var(--mk-space-4);
  overflow-x: auto;
}

.mk-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 160px;
  padding-bottom: 28px;
  position: relative;
}

.mk-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 24px;
  position: relative;
}

.mk-bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, var(--mk-accent), rgba(88, 101, 242, 0.6));
  border-radius: 3px 3px 0 0;
  transition: height var(--mk-duration-slow) var(--mk-ease-enter);
}

.mk-bar-label {
  font-size: 10px;
  color: var(--mk-text-muted);
  margin-top: 4px;
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: top right;
  position: absolute;
  bottom: -24px;
}

.mk-bar-tooltip {
  font-size: 11px;
  font-weight: 600;
  color: var(--mk-text);
  margin-bottom: 2px;
}

/* ——— Media Browser ——— */
.mk-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--mk-space-3);
}

.mk-media-card {
  background: var(--mk-bg-elev);
  border: 2px solid transparent;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  cursor: pointer;
  transform: translateY(0);
  transition:
    border-color var(--mk-duration-normal) var(--mk-ease-standard),
    box-shadow var(--mk-duration-normal) var(--mk-ease-standard),
    transform var(--mk-duration-normal) var(--mk-ease-enter);
}

.mk-media-card:hover {
  border-color: var(--mk-border);
  box-shadow: var(--mk-shadow-1);
  transform: var(--mk-motion-lift);
}

.mk-media-card-selected {
  border-color: var(--mk-color-red) !important;
  box-shadow: 0 0 0 1px var(--mk-color-red);
}

.mk-media-thumb {
  aspect-ratio: 1;
  background: var(--mk-bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mk-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-media-icon {
  font-size: 32px;
  color: var(--mk-text-muted);
}

.mk-media-info {
  padding: var(--mk-space-2);
}

.mk-media-name {
  display: block;
  font-size: var(--mk-font-size-xs);
  font-weight: 600;
  color: var(--mk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-media-meta {
  display: block;
  font-size: 11px;
  color: var(--mk-text-muted);
  margin-top: 2px;
}

.mk-media-detail {
  margin-top: var(--mk-space-4);
}

.mk-media-detail-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--mk-space-4);
}

@media (max-width: 600px) {
  .mk-media-detail-body {
    grid-template-columns: 1fr;
  }
}

.mk-media-detail-preview {
  background: var(--mk-bg-elev-2);
  border-radius: var(--mk-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px;
}

.mk-media-detail-preview img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.mk-media-detail-fields {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-3);
}

/* ——— Avatar (team / testimonials) ——— */
.mk-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--mk-border);
  flex-shrink: 0;
}

.mk-avatar-sm {
  width: 36px;
  height: 36px;
}

.mk-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-bg-elev-2);
  color: var(--mk-text-muted);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ——— Upload Zone ——— */
.mk-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: var(--mk-bg);
  overflow: hidden;
  transition: background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    opacity var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-upload-zone:hover {
  border-color: var(--mk-color-red);
}

.mk-upload-zone.mk-uploading {
  opacity: 0.5;
}

.mk-upload-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ——— Fieldset ——— */
.mk-fieldset {
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-4);
  margin: 0;
}

.mk-fieldset legend {
  font-size: var(--mk-font-size-sm);
  font-weight: 600;
  color: var(--mk-text-muted);
  padding: 0 var(--mk-space-2);
  letter-spacing: 0.02em;
}

/* ——— Quote Preview (testimonials) ——— */
.mk-quote-preview {
  font-style: italic;
  color: var(--mk-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.mk-quote-preview::before {
  content: "\00AB\00A0";
  color: var(--mk-color-red);
  font-weight: 700;
}

.mk-quote-preview::after {
  content: "\00A0\00BB";
  color: var(--mk-color-red);
  font-weight: 700;
}

/* ——— Card Row with Avatar/Thumbnail ——— */
.mk-row-visual {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
}

.mk-row-visual-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mk-row-visual-title {
  font-weight: 600;
  font-size: var(--mk-font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-row-visual-sub {
  font-size: var(--mk-font-size-xs);
  color: var(--mk-text-muted);
}

/* ——— Reorder Buttons ——— */
.mk-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mk-reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border: 1px solid var(--mk-border);
  background: transparent;
  color: var(--mk-text-muted);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter);
}

.mk-reorder-btn:first-child {
  border-radius: 4px 4px 0 0;
}

.mk-reorder-btn:last-child {
  border-radius: 0 0 4px 4px;
  border-top: none;
}

.mk-reorder-btn:hover:not(:disabled) {
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
}

.mk-reorder-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.mk-reorder-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ——— Tag Badges ——— */
.mk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mk-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--mk-radius-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--mk-bg-elev-2);
  border: 1px solid var(--mk-border);
  color: var(--mk-text-muted);
}

/* ——— Social Links Editor ——— */
.mk-social-link-item {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  padding: var(--mk-space-2);
  background: var(--mk-bg);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  margin-bottom: var(--mk-space-2);
}

.mk-social-link-item input {
  min-height: 32px;
  font-size: var(--mk-font-size-xs);
}

/* ——— Featured Toggle ——— */
.mk-featured-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--mk-radius-sm);
  font-size: var(--mk-font-size-sm);
  cursor: pointer;
  border: 1px solid var(--mk-border);
  background: transparent;
  color: var(--mk-text);
  transition: background-color var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-featured-toggle:hover {
  background: var(--mk-bg-elev-2);
}

.mk-featured-active {
  background: rgba(242, 201, 76, 0.12);
  border-color: rgba(242, 201, 76, 0.5);
  color: var(--mk-color-warm);
}

/* ——— Status Pill Variants ——— */
.mk-status-pill-draft {
  border-color: var(--mk-border);
  color: var(--mk-text-muted);
  background: var(--mk-bg-elev-2);
}

.mk-status-pill-published {
  border-color: rgba(63, 185, 80, 0.45);
  color: #d5f5dc;
  background: rgba(63, 185, 80, 0.12);
}

.mk-status-pill-archived {
  border-color: rgba(242, 201, 76, 0.5);
  color: #ffe9a8;
  background: rgba(242, 201, 76, 0.14);
}

/* Visual case editor */
.mk-editor-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  background: var(--mk-bg);
}

.mk-editor-mode-tab {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--mk-text-muted);
  font: 700 12px var(--mk-font-sans);
  cursor: pointer;
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter);
}

.mk-editor-mode-tab.active,
.mk-editor-mode-tab:hover {
  background: var(--mk-color-red);
  color: var(--mk-color-white);
}

.mk-editor-mode-tab:active {
  transform: scale(0.97);
}

.mk-visual-section {
  margin-top: 14px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #000415;
  color: #f7f7f5;
}

.mk-visual-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 24px;
  align-items: center;
}

@media (max-width: 900px) {
  .mk-visual-hero { grid-template-columns: 1fr; }
}

.mk-visual-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.72);
  font: 800 12px var(--mk-font-sans);
  text-transform: uppercase;
}

.mk-visual-input,
.mk-visual-textarea,
.mk-visual-card input,
.mk-visual-card textarea,
.mk-visual-stat input,
.mk-visual-swatch input,
.mk-visual-type input,
.mk-visual-screen input,
.mk-visual-timeline input,
.mk-visual-timeline textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(255,255,255,0.045);
  color: #fff;
  font-family: var(--mk-font-sans);
}

.mk-visual-input:focus,
.mk-visual-textarea:focus,
.mk-visual-card input:focus,
.mk-visual-card textarea:focus,
.mk-visual-stat input:focus,
.mk-visual-swatch input:focus,
.mk-visual-type input:focus,
.mk-visual-screen input:focus,
.mk-visual-timeline input:focus,
.mk-visual-timeline textarea:focus {
  outline: none;
  border-color: #ca0274;
  box-shadow: 0 0 0 2px rgba(202,2,116,0.22);
}

.mk-visual-title-input {
  margin-bottom: 10px;
  padding: 8px 10px;
  font: 900 30px/1.08 var(--mk-font-sans);
  text-transform: uppercase;
}

.mk-visual-subtitle-input {
  margin-bottom: 14px;
  padding: 8px 10px;
  font: 700 18px/1.35 var(--mk-font-sans);
}

.mk-visual-body-input {
  min-height: 92px;
  padding: 10px;
  font: 500 14px/1.65 var(--mk-font-sans);
  resize: vertical;
}

.mk-visual-eyebrow-input {
  max-width: 260px;
  margin-bottom: 10px;
  padding: 7px 10px;
  color: rgba(255,255,255,0.72);
  font: 800 12px var(--mk-font-sans);
  text-transform: uppercase;
}

.mk-visual-quote {
  margin: 18px 0 0;
  padding-left: 18px;
  border-left: 3px solid #ca0274;
}

.mk-visual-media-panel {
  display: grid;
  gap: 10px;
}

.mk-visual-media-panel img {
  width: 100%;
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
  background: #101122;
}

.mk-visual-url-input {
  padding: 8px 10px;
  font-size: 12px;
}

.mk-visual-stats,
.mk-visual-card-grid,
.mk-visual-swatches,
.mk-visual-type-grid,
.mk-visual-screen-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.mk-visual-stats,
.mk-visual-card-grid,
.mk-visual-screen-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mk-visual-swatches {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mk-visual-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .mk-visual-stats,
  .mk-visual-card-grid,
  .mk-visual-swatches,
  .mk-visual-type-grid,
  .mk-visual-screen-grid {
    grid-template-columns: 1fr;
  }
}

.mk-visual-stat,
.mk-visual-card,
.mk-visual-swatch,
.mk-visual-type,
.mk-visual-screen,
.mk-visual-timeline li {
  position: relative;
  border: 1px solid rgba(202,2,116,0.28);
  background: rgba(255,255,255,0.035);
}

.mk-visual-stat,
.mk-visual-card,
.mk-visual-type {
  padding: 18px;
}

.mk-visual-stat input:first-of-type {
  margin-bottom: 8px;
  font: 900 18px var(--mk-font-sans);
}

.mk-visual-stat input:last-of-type {
  font: 800 11px var(--mk-font-sans);
  text-transform: uppercase;
}

.mk-visual-card-icon {
  max-width: 54px;
  height: 42px;
  margin-bottom: 18px;
  color: #ca0274;
  font: 900 13px var(--mk-font-sans);
  text-align: center;
}

.mk-visual-card-title {
  margin-bottom: 10px;
  font: 900 17px/1.2 var(--mk-font-sans);
  text-transform: uppercase;
}

.mk-visual-card-desc {
  min-height: 80px;
  resize: vertical;
}

.mk-visual-swatch span {
  display: block;
  height: 96px;
}

.mk-visual-swatch input,
.mk-visual-type input,
.mk-visual-screen input {
  min-height: 34px;
  padding: 7px 10px;
}

.mk-visual-screen img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #101122;
}

.mk-visual-static-title {
  margin: 0 0 14px;
  color: #fff;
  font: 900 26px/1.1 var(--mk-font-sans);
  text-transform: uppercase;
}

.mk-visual-timeline {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mk-visual-timeline li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.mk-visual-timeline li > span {
  color: #ca0274;
  font: 900 18px var(--mk-font-sans);
}

.mk-visual-number-input {
  max-width: 130px;
  margin-bottom: 10px;
  color: #ca0274;
  font: 900 38px/1 var(--mk-font-sans);
}

.mk-visual-highlight {
  text-align: center;
}

.mk-visual-highlight .mk-visual-title-input,
.mk-visual-highlight .mk-visual-body-input {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mk-visual-add {
  min-height: 38px;
  border: 1px dashed rgba(202,2,116,0.65);
  background: rgba(202,2,116,0.08);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.mk-visual-card-add {
  min-height: 130px;
}

.mk-visual-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.3);
  color: #fff;
  cursor: pointer;
  font: 800 12px var(--mk-font-sans);
}

.mk-youtube-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  background: #050816;
}

.mk-youtube-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mk-video-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 620px);
  padding: 4px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  background: rgba(8, 18, 32, 0.72);
}

.mk-video-mode {
  min-height: 40px;
  border: 0;
  border-radius: calc(var(--mk-radius) - 3px);
  background: transparent;
  color: var(--mk-text-muted);
  cursor: pointer;
  font-weight: 800;
}

.mk-video-mode.active {
  background: var(--mk-accent);
  color: #fff;
}

.mk-video-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
  gap: var(--mk-space-4);
}

.mk-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  background: #050816;
}

.mk-video-frame-spaced {
  margin-top: var(--mk-space-4);
}

.mk-video-frame iframe,
.mk-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.mk-video-stream-only {
  pointer-events: none;
  user-select: none;
}

.mk-video-note {
  margin: var(--mk-space-3) 0 0;
}

.mk-video-contract {
  display: grid;
  gap: var(--mk-space-3);
}

.mk-video-contract > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--mk-space-3);
  padding: var(--mk-space-3);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  background: rgba(255, 255, 255, 0.03);
}

.mk-video-contract strong {
  color: var(--mk-text);
}

.mk-video-contract span {
  color: var(--mk-text-muted);
}

.mk-video-code {
  margin: var(--mk-space-2) 0 0;
  padding: var(--mk-space-3);
  overflow-x: auto;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  background: #07111d;
  color: var(--mk-text);
  white-space: pre-wrap;
}

.mk-browser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-3);
  margin-bottom: var(--mk-space-4);
}

.mk-browser-card {
  padding: 0;
  overflow: hidden;
}

.mk-browser-card .mk-card-head {
  margin: 0;
  padding: var(--mk-space-3) var(--mk-space-4);
}

.mk-browser-frame {
  display: block;
  width: 100%;
  min-height: min(76vh, 820px);
  border: 0;
  background: #050816;
}

@media (max-width: 760px) {
  .mk-video-mode-tabs,
  .mk-video-grid,
  .mk-video-contract > div {
    grid-template-columns: 1fr;
  }
}

/* Normalized interaction and entrance motion */
.mk-main > *,
.mk-landing > *,
.mk-login-card {
  animation: mk-content-enter var(--mk-duration-slow) var(--mk-ease-enter);
}

.mk-topbar {
  animation: mk-topbar-enter var(--mk-duration-slow) var(--mk-ease-enter);
}

.mk-card,
.mk-stat-card,
.mk-array-item,
.mk-social-link-item,
.mk-video-contract > div {
  transition:
    border-color var(--mk-duration-normal) var(--mk-ease-standard),
    background-color var(--mk-duration-normal) var(--mk-ease-standard),
    box-shadow var(--mk-duration-normal) var(--mk-ease-standard),
    transform var(--mk-duration-normal) var(--mk-ease-enter),
    opacity var(--mk-duration-normal) var(--mk-ease-standard);
}

.mk-nav a,
.mk-section-link {
  position: relative;
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    opacity var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-nav a::after,
.mk-section-link::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--mk-duration-normal) var(--mk-ease-enter);
}

.mk-nav a:hover,
.mk-section-link:hover {
  text-decoration: none;
}

.mk-nav a:hover::after,
.mk-nav a.active::after,
.mk-section-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.mk-input,
select.mk-input,
textarea.mk-input,
.mk-visual-input,
.mk-visual-textarea,
.mk-visual-card input,
.mk-visual-card textarea,
.mk-visual-stat input,
.mk-visual-swatch input,
.mk-visual-type input,
.mk-visual-screen input,
.mk-visual-timeline input,
.mk-visual-timeline textarea {
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-toggle-btn,
.mk-featured-toggle,
.mk-video-mode,
.mk-visual-add,
.mk-visual-remove {
  transform: translateY(0) scale(1);
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard),
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard),
    transform var(--mk-duration-fast) var(--mk-ease-enter),
    opacity var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-toggle-btn:hover,
.mk-featured-toggle:hover,
.mk-video-mode:hover,
.mk-visual-add:hover,
.mk-visual-remove:hover {
  border-color: color-mix(in srgb, var(--mk-border) 45%, var(--mk-focus));
  transform: var(--mk-motion-lift);
}

.mk-toggle-btn:active,
.mk-featured-toggle:active,
.mk-video-mode:active,
.mk-visual-add:active,
.mk-visual-remove:active {
  transform: var(--mk-motion-press);
}

.mk-canvas-preview-backdrop {
  animation: mk-backdrop-enter var(--mk-duration-normal) var(--mk-ease-standard) both;
}

.mk-canvas-preview-dialog {
  transform-origin: center center;
  animation: mk-dialog-enter var(--mk-duration-slow) var(--mk-ease-enter) both;
}

@keyframes mk-content-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mk-topbar-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mk-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mk-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Block visual previews (mk-bp-*) ─────────────────────────────────────── */
.mk-bp { display:flex; flex-direction:column; gap:6px; font-size:12px; line-height:1.35; color:var(--mk-text); width:100%; overflow:hidden; }
.mk-bp > strong, .mk-bp-card > strong { font-size:13px; }
.mk-bp-title { font-size:14px; }
.mk-bp-sub, .mk-bp-cap { color:var(--mk-text-muted); font-size:11px; }
.mk-bp-text { margin:0; color:var(--mk-text-muted); }
.mk-bp-pill { display:inline-block; align-self:flex-start; background:var(--mk-color-red); color:#fff; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.mk-bp-price { color:var(--mk-color-red); font-weight:700; }
.mk-bp-big { font-size:20px; line-height:1; }

.mk-bp-hero { padding:10px 12px; border-radius:8px; color:#fff; background:#1e3a5f; min-height:56px; }
.mk-bp-hero .mk-bp-title { color:#fff; }
.mk-bp-hero .mk-bp-sub { color:rgba(255,255,255,.85); }
.mk-bp-cta { align-items:flex-start; padding:10px 12px; background:color-mix(in srgb, var(--mk-color-red) 12%, var(--mk-bg-elev)); border-radius:8px; }
.mk-bp-highlight { flex-direction:row; align-items:center; gap:10px; padding:10px 12px; background:var(--mk-bg-elev-2); border-radius:8px; }
.mk-bp-video { flex-direction:row; align-items:center; gap:8px; padding:14px; background:var(--mk-bg-elev-2); border-radius:8px; min-height:48px; }
.mk-bp-play { font-size:16px; }
.mk-bp-social { flex-direction:row; align-items:center; gap:8px; }
.mk-bp-avatar { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--mk-bg-elev-2); border:1px solid var(--mk-border); font-size:12px; }

.mk-bp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); gap:6px; }
.mk-bp-card { display:flex; flex-direction:column; gap:2px; padding:6px 8px; border:1px solid var(--mk-border); border-radius:6px; background:var(--mk-bg); min-height:34px; }
.mk-bp-ico { color:var(--mk-color-red); font-weight:700; font-size:11px; }
.mk-bp-num { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; border-radius:4px; background:var(--mk-color-red); color:#fff; font-size:10px; font-weight:700; }
.mk-bp-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--mk-border); }
.mk-bp-row:last-child { border-bottom:none; }
.mk-bp-quote { color:var(--mk-text-muted); font-size:11px; }

.mk-bp-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(56px, 1fr)); gap:6px; }
.mk-bp-img { width:100%; height:48px; object-fit:cover; border-radius:6px; background:var(--mk-bg-elev-2); }
.mk-bp-ph { display:flex; align-items:center; justify-content:center; min-height:48px; width:100%; background:var(--mk-bg-elev-2); border:1px dashed var(--mk-border); border-radius:6px; color:var(--mk-text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.mk-bp-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.mk-bp-swatch { width:22px; height:22px; border-radius:6px; border:1px solid var(--mk-border); display:inline-block; }
.mk-bp-code { display:block; font-family:var(--mk-font-mono, ui-monospace, monospace); font-size:11px; color:var(--mk-text-muted); background:var(--mk-bg-elev-2); padding:6px 8px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-bp-hr { border:none; border-top:2px solid var(--mk-border); margin:8px 0; }
.mk-bp-field { height:10px; background:var(--mk-bg-elev-2); border-radius:4px; }
.mk-bp-field-area { height:26px; }

/* ── Add-Block catalog cards ─────────────────────────────────────────────── */
.mk-block-type-picker {
  display:flex!important;
  flex-direction:column;
  gap:6px;
  max-height:440px;
  overflow:auto;
  padding:2px 3px 2px 0;
}
.mk-block-type-group {
  flex:none;
  overflow:hidden;
  border:1px solid var(--mk-border);
  border-radius:7px;
  background:color-mix(in srgb,var(--mk-bg-elev) 42%,transparent);
  transition:border-color var(--mk-duration-fast),background-color var(--mk-duration-fast);
}
.mk-block-type-group[open] {
  border-color:color-mix(in srgb,var(--mk-color-red) 36%,var(--mk-border));
  background:color-mix(in srgb,var(--mk-bg-elev) 68%,transparent);
}
.mk-block-type-group-summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 10px;
  align-items:center;
  gap:9px;
  min-height:54px;
  padding:8px 10px;
  list-style:none;
  color:var(--mk-text);
  cursor:pointer;
  user-select:none;
}
.mk-block-type-group-summary::-webkit-details-marker { display:none; }
.mk-block-type-group-summary:hover,.mk-block-type-group-summary:focus-visible {
  background:color-mix(in srgb,var(--mk-color-red) 5%,var(--mk-bg-elev));
  outline:0;
}
.mk-block-type-group-copy { min-width:0; }
.mk-block-type-group-copy strong,.mk-block-type-group-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-block-type-group-copy strong { font-size:12px; line-height:1.2; }
.mk-block-type-group-copy small { margin-top:3px; color:var(--mk-text-muted); font-size:9px; line-height:1.3; }
.mk-block-type-group.has-selected > .mk-block-type-group-summary .mk-block-type-group-copy strong::before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 7px 1px 0;
  border-radius:50%;
  background:var(--mk-color-red);
}
.mk-block-type-group-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:23px;
  height:20px;
  padding:0 6px;
  border:1px solid var(--mk-border);
  border-radius:999px;
  color:var(--mk-text-muted);
  font-family:var(--mk-font-mono,ui-monospace,monospace);
  font-size:9px;
}
.mk-block-type-group-chevron {
  width:7px;
  height:7px;
  border-right:1.5px solid var(--mk-text-muted);
  border-bottom:1.5px solid var(--mk-text-muted);
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--mk-duration-fast),border-color var(--mk-duration-fast);
}
.mk-block-type-group[open] > .mk-block-type-group-summary .mk-block-type-group-chevron {
  border-color:var(--mk-color-red);
  transform:translateY(2px) rotate(225deg);
}
.mk-block-type-group-list {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:3px 5px 6px;
  border-top:1px solid color-mix(in srgb,var(--mk-border) 72%,transparent);
  animation:mk-block-type-group-open 140ms var(--mk-ease-enter) both;
}
@keyframes mk-block-type-group-open { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
.mk-block-type-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:7px 10px;
  text-align:left;
  border:1px solid transparent;
  border-left:2px solid var(--mk-border);
  border-radius:4px;
  background:transparent;
  color:var(--mk-text);
  cursor:pointer;
  transition:border-color var(--mk-duration-fast),background-color var(--mk-duration-fast),padding-left var(--mk-duration-fast);
}
.mk-block-type-card:hover,.mk-block-type-card:focus-visible { border-color:rgba(215,38,62,.52); background:color-mix(in srgb,var(--mk-color-red) 5%,var(--mk-bg-elev)); padding-left:13px; outline:0; }
.mk-block-type-card-active { border-left-color:var(--mk-color-red); background:color-mix(in srgb,var(--mk-color-red) 7%,var(--mk-bg-elev)); }
.mk-block-type-card-copy { min-width:0; }
.mk-block-type-card-copy strong,.mk-block-type-card-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-block-type-card-copy strong { color:var(--mk-text); font-size:12px; line-height:1.2; }
.mk-block-type-card-copy small { margin-top:3px; color:var(--mk-text-muted); font-size:10px; line-height:1.25; }
.mk-block-type-card code { flex:none; max-width:106px; overflow:hidden; color:var(--mk-text-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.mk-block-type-real-preview {
  position:fixed;
  top:82px;
  right:24px;
  z-index:850;
  width:min(720px,calc(100vw - 500px));
  min-width:560px;
  padding:12px;
  border:1px solid rgba(255,255,255,.17);
  border-top:2px solid var(--mk-color-red);
  border-radius:12px;
  background:rgba(4,9,22,.97);
  box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 0 1px rgba(215,38,62,.12);
  pointer-events:none;
  animation:mk-block-real-preview-in 150ms var(--mk-ease-enter) both;
}
.mk-block-type-real-preview-head,.mk-block-type-real-preview-foot { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.mk-block-type-real-preview-head { padding:2px 2px 10px; }
.mk-block-type-real-preview-head span,.mk-block-type-real-preview-head strong,.mk-block-type-real-preview-head small { display:block; }
.mk-block-type-real-preview-head span { color:var(--mk-color-red); font-size:9px; font-weight:900; letter-spacing:.16em; }
.mk-block-type-real-preview-head strong { margin-top:3px; color:#fff; font-size:16px; }
.mk-block-type-real-preview-head small { margin-top:3px; color:rgba(255,255,255,.58); font-size:10px; }
.mk-block-type-real-preview-head code { color:rgba(255,255,255,.46); font-size:10px; }
.mk-block-type-real-preview-viewport { width:100%; height:414px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#050816; }
.mk-block-type-real-preview-viewport iframe { display:block; width:1440px; height:900px; border:0; background:#050816; transform:scale(.46); transform-origin:top left; }
.mk-block-type-real-preview-foot { padding:9px 2px 0; color:rgba(255,255,255,.46); font-size:9px; font-weight:700; letter-spacing:.04em; }
@keyframes mk-block-real-preview-in { from { opacity:0; transform:translateY(6px) scale(.992); } to { opacity:1; transform:none; } }
@media (max-width:1100px) {
  .mk-block-type-real-preview { right:14px; width:600px; min-width:0; }
  .mk-block-type-real-preview-viewport { height:360px; }
  .mk-block-type-real-preview-viewport iframe { transform:scale(.4); }
}
@media (max-width:760px) { .mk-block-type-real-preview { display:none; } }

/* ── Live preview pane in the block editor ───────────────────────────────── */
.mk-block-live-preview { border:1px solid var(--mk-border); border-radius:var(--mk-radius-md); background:var(--mk-bg); padding:10px 12px; }
.mk-block-live-preview-frame { margin-top:6px; }

/* Make the list-card preview crisper */
.mk-block-card .mk-block-preview { padding:8px 10px; }

/* Hero visual editor extras */
.mk-visual-copy{display:flex;flex-direction:column;gap:8px;flex:1 1 320px}
.mk-visual-field-row{display:flex;gap:8px;flex-wrap:wrap}
.mk-visual-field-row>*{flex:1 1 140px}
.mk-visual-media-panel{display:flex;flex-direction:column;gap:8px;flex:1 1 280px;min-width:0}
.mk-visual-media-empty{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:repeating-linear-gradient(45deg,var(--mk-bg-elev-2),var(--mk-bg-elev-2) 10px,var(--mk-bg) 10px,var(--mk-bg) 20px);border:1px dashed var(--mk-border);border-radius:8px;color:var(--mk-text-muted);font-size:12px}
.mk-visual-media-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--mk-border)}
.mk-visual-media-url{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--mk-text-muted)}
.mk-visual-hero{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;padding:14px;border-radius:10px}
.mk-visual-hero .mk-visual-title-input{font-size:22px!important;font-weight:800}
.mk-visual-hero .mk-visual-subtitle-input{font-size:14px!important}

/* ── Modal + media picker ────────────────────────────────────────────────── */
.mk-modal-backdrop { position:fixed; inset:0; background:rgba(8,10,16,.6); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.mk-modal { background:var(--mk-bg-elev); border:1px solid var(--mk-border); border-radius:var(--mk-radius-lg); box-shadow:var(--mk-shadow-2); width:min(880px,96vw); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
.mk-modal-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--mk-border); }
.mk-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--mk-border); }

/* ── ExFront motion: the animation popup and the Motion tab list ── */
.mk-motion-picker { width:min(820px,96vw); max-height:88vh; }
.mk-motion-picker-body { display:flex; flex:1; min-height:0; overflow:hidden; }
.mk-motion-gallery { flex:1.2; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:start; padding:14px; overflow:auto; }
.mk-motion-card { display:grid; justify-items:center; gap:6px; padding:12px 8px 10px; border:1px solid var(--mk-border); border-radius:8px; background:none; color:inherit; cursor:pointer; text-align:center; }
.mk-motion-card:hover { border-color:var(--mk-accent); }
.mk-motion-card.is-selected { border-color:var(--mk-accent); box-shadow:0 0 0 1px var(--mk-accent); }
.mk-motion-card strong { font-size:11px; }
.mk-motion-card-hint { font-size:9px; color:var(--mk-text-dim); line-height:1.35; }
.mk-motion-demo { width:34px; height:22px; border-radius:4px; background:var(--mk-accent); opacity:.9; }
.mk-motion-demo.is-fade { animation:mkexm-fade 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
.mk-motion-demo.is-slide_up { animation:mkexm-up 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
.mk-motion-demo.is-slide_down { animation:mkexm-down 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
.mk-motion-demo.is-slide_left { animation:mkexm-left 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
.mk-motion-demo.is-slide_right { animation:mkexm-right 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
.mk-motion-demo.is-scale_in { animation:mkexm-scale 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
.mk-motion-demo.is-breathing { animation:mkexm-breathe 2.6s ease-in-out infinite; }
.mk-motion-demo.is-pulse { animation:mkexm-pulse 1.8s ease-in-out infinite; }
.mk-motion-demo.is-progress_fill { transform-origin:left; animation:mkexm-fill 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes mkexm-fade { 0%{opacity:0} 40%,80%{opacity:.9} 100%{opacity:0} }
@keyframes mkexm-up { 0%{opacity:0;transform:translateY(8px)} 40%,80%{opacity:.9;transform:translateY(0)} 100%{opacity:0;transform:translateY(8px)} }
@keyframes mkexm-down { 0%{opacity:0;transform:translateY(-8px)} 40%,80%{opacity:.9;transform:translateY(0)} 100%{opacity:0;transform:translateY(-8px)} }
@keyframes mkexm-left { 0%{opacity:0;transform:translateX(10px)} 40%,80%{opacity:.9;transform:translateX(0)} 100%{opacity:0;transform:translateX(10px)} }
@keyframes mkexm-right { 0%{opacity:0;transform:translateX(-10px)} 40%,80%{opacity:.9;transform:translateX(0)} 100%{opacity:0;transform:translateX(-10px)} }
@keyframes mkexm-scale { 0%{opacity:0;transform:scale(.8)} 40%,80%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(.8)} }
@keyframes mkexm-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes mkexm-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes mkexm-fill { 0%{transform:scaleX(0)} 40%,80%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
.mk-motion-settings { width:250px; border-left:1px solid var(--mk-border); padding:14px; display:flex; flex-direction:column; gap:10px; overflow:auto; }
.mk-check-field { display:flex; align-items:center; gap:8px; font-size:11px; cursor:pointer; }
.mk-check-field input { accent-color:var(--mk-accent); }
.mk-motion-list { display:grid; gap:6px; }
.mk-motion-item { display:flex; align-items:center; gap:6px; padding:7px 8px; border:1px solid var(--ex-line); border-radius:6px; }
.mk-motion-item-copy { flex:1; min-width:0; display:grid; gap:2px; }
.mk-motion-item-copy strong { font-size:11px; }
.mk-motion-item-copy span { font-size:9px; color:var(--ex-dim); }
.mk-motion-actions { display:flex; gap:6px; margin-top:8px; }
/* ── Smart guides ── */
.mk-hero-preview-scale-wrap { position:relative; }
.mk-ex-guide { position:absolute; z-index:40; background:var(--ex-accent); pointer-events:none;
  box-shadow:0 0 0 .5px rgba(0,0,0,.35); }
.mk-ex-guide.is-v { top:0; bottom:0; width:1px; }
.mk-ex-guide.is-h { left:0; right:0; height:1px; }

/* ── Release step-up re-auth ── */
.mk-hero-stepup { border:1px solid #e0b453; border-radius:8px; padding:10px 12px; margin-top:10px; }
.mk-hero-stepup p { margin:0 0 8px; font-size:11px; line-height:1.5; }
.mk-hero-stepup-row { display:flex; gap:8px; }
.mk-hero-stepup-row input { flex:1; }
.mk-hero-stepup-ok { margin:8px 0 0; font-size:11px; color:#4caf7d; }
/* ── ExFront logic: the interaction graph editor ── */
.mk-exl-layout { display:flex; min-height:560px; border:1px solid var(--ex-line); background:var(--ex-bg); }
.mk-exl-side { flex:0 0 280px; border-right:1px solid var(--ex-line); padding:10px; display:flex; flex-direction:column; gap:8px; overflow:auto; }
/* STATES: one section per module (tint dot + name), compact rows below. */
.mk-exl-states-section { display:flex; align-items:center; gap:5px; margin-top:4px; font:700 8px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ex-dim); }
.mk-exl-dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.mk-exl-dot.is-tint-0 { background:#3f9e6a; }
.mk-exl-dot.is-tint-1 { background:#4d8fd1; }
.mk-exl-dot.is-tint-2 { background:#c9a13d; }
.mk-exl-dot.is-tint-3 { background:#9a6fd0; }
.mk-exl-dot.is-tint-4 { background:#3d9e9e; }
.mk-exl-state { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:3px 4px; border-radius:4px; cursor:pointer; }
.mk-exl-state:hover, .mk-exl-state.is-open { background:rgba(127,127,127,.08); }
.mk-exl-state-name { font:600 10px/1.2 ui-monospace,monospace; color:var(--ex-text); white-space:nowrap; }
.mk-exl-state input { min-width:0; font-size:10px; padding:3px 6px; }
.mk-exl-chip { font:600 9px/1 ui-monospace,monospace; color:var(--ex-dim); border:1px solid var(--ex-line-soft); border-radius:999px; padding:2px 6px; cursor:pointer; }
.mk-exl-chip:hover { border-color:var(--ex-accent); color:var(--ex-text); }
.mk-exl-chip.is-default { border-color:var(--ex-accent); color:var(--ex-text); }
.mk-exl-range { font:500 9px/1 ui-monospace,monospace; color:var(--ex-dim); }
/* The unfolded row editor: quiet indented column under the compact row. */
.mk-exl-state-editor { display:grid; gap:4px; padding:4px 0 6px 6px; border-left:2px solid var(--ex-line); margin:0 0 4px 6px; }
.mk-exl-state-editor .mk-exl-field { padding:0; }
.mk-exl-state-editor > button { justify-self:start; }
/* Palette: five category groups, each a mini-header plus 2-col buttons. */
.mk-exl-palette { display:flex; flex-direction:column; gap:4px; }
.mk-exl-palette-head { font:700 8px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ex-dim); margin-top:2px; }
.mk-exl-palette-group { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mk-exl-palette button { display:flex; align-items:center; gap:4px; border:1px solid var(--ex-line-soft); border-left-width:2px; border-radius:4px; background:none; color:var(--ex-dim); font-size:8px; padding:5px 5px; cursor:pointer; text-align:left; }
.mk-exl-palette button:hover { border-color:var(--ex-accent); color:var(--ex-text); }
.mk-exl-palette button.is-cat-event { border-left-color:#3f9e6a; }
.mk-exl-palette button.is-cat-event .mk-exl-glyph { color:#3f9e6a; }
.mk-exl-palette button.is-cat-question { border-left-color:#c9a13d; }
.mk-exl-palette button.is-cat-question .mk-exl-glyph { color:#c9a13d; }
.mk-exl-palette button.is-cat-change { border-left-color:#4d8fd1; }
.mk-exl-palette button.is-cat-change .mk-exl-glyph { color:#4d8fd1; }
.mk-exl-palette button.is-cat-loop { border-left-color:#d1793f; }
.mk-exl-palette button.is-cat-loop .mk-exl-glyph { color:#d1793f; }
.mk-exl-palette button.is-cat-show { border-left-color:#9a6fd0; }
.mk-exl-palette button.is-cat-show .mk-exl-glyph { color:#9a6fd0; }
.mk-exl-warnings p { margin:2px 0; font-size:9px; color:#e0b453; }
.mk-exl-hint { font-size:9px; color:var(--ex-dim); border:1px dashed var(--ex-line); border-radius:4px; padding:6px; }
/* The recipe: an indented monospace outline, glyphs tinted per category. */
.mk-exl-recipe-line { display:flex; align-items:baseline; gap:5px; font:500 10px/1.6 ui-monospace,monospace; color:var(--ex-text); }
.mk-exl-recipe-glyph { flex:0 0 auto; font-size:9px; }
.mk-exl-recipe-glyph.is-event { color:#3f9e6a; }
.mk-exl-recipe-glyph.is-question { color:#c9a13d; }
.mk-exl-recipe-glyph.is-change { color:#4d8fd1; }
.mk-exl-recipe-glyph.is-show { color:#9a6fd0; }
.mk-exl-recipe-glyph.is-loop { color:#d1793f; }
.mk-exl-recipe-keyword { color:var(--ex-dim); font-style:italic; }
.mk-exl-zoom { margin-top:auto; display:flex; align-items:center; gap:6px; }
.mk-exl-zoom span { font-size:9px; color:var(--ex-dim); min-width:34px; text-align:center; }
.mk-exl-main { flex:1; min-width:0; display:flex; flex-direction:column; }
/* Module tabs: one quiet strip above the canvas filters the graph by origin. */
.mk-exl-modules { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px; border-bottom:1px solid var(--ex-line); }
.mk-exl-modules button { border:1px solid var(--ex-line-soft); border-radius:999px; background:none; color:var(--ex-dim); font:600 9px/1 ui-monospace,monospace; letter-spacing:.04em; padding:5px 10px; cursor:pointer; }
.mk-exl-modules button:hover { border-color:var(--ex-accent); color:var(--ex-text); }
.mk-exl-modules button.is-active { border-color:var(--ex-accent); color:var(--ex-text); }
.mk-exl-canvas { position:relative; flex:1; overflow:auto; min-height:560px;
  background-image:radial-gradient(circle, var(--ex-line-soft) 1px, transparent 1px); background-size:24px 24px; }
.mk-exl-scale { position:relative; transform-origin:0 0; width:2600px; height:1700px; }
.mk-exl-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* Hairlines by default; the accent belongs to the selected chain only. */
.mk-exl-wire { fill:none; stroke:var(--ex-line); stroke-width:1; opacity:.9; }
.mk-exl-wire.is-else { stroke-dasharray:4 3; }
.mk-exl-wire.is-lit { stroke:var(--ex-accent); stroke-width:1.5; }
.mk-exl-wire-label { fill:var(--ex-dim); font:600 8px ui-monospace,monospace; }
.mk-exl-wire-label.is-else { fill:#b98f3a; }
/* Where a filtered-out wire went: a pill at the source port names the module. */
.mk-exl-wire-stub { fill:var(--ex-dim); font:600 8px ui-monospace,monospace; }
/* Module regions on the All view: a faint tinted box per module; the label
   is the only clickable svg element (pointer-events restored inline). */
.mk-exl-region { pointer-events:none; }
.mk-exl-region.is-tint-0 { fill:rgba(63,158,106,.05); stroke:rgba(63,158,106,.18); }
.mk-exl-region.is-tint-1 { fill:rgba(77,143,209,.05); stroke:rgba(77,143,209,.18); }
.mk-exl-region.is-tint-2 { fill:rgba(201,161,61,.05); stroke:rgba(201,161,61,.18); }
.mk-exl-region.is-tint-3 { fill:rgba(154,111,208,.05); stroke:rgba(154,111,208,.18); }
.mk-exl-region.is-tint-4 { fill:rgba(61,158,158,.05); stroke:rgba(61,158,158,.18); }
.mk-exl-region-label { font:700 9px ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }
.mk-exl-region-label.is-tint-0 { fill:#3f9e6a; }
.mk-exl-region-label.is-tint-1 { fill:#4d8fd1; }
.mk-exl-region-label.is-tint-2 { fill:#c9a13d; }
.mk-exl-region-label.is-tint-3 { fill:#9a6fd0; }
.mk-exl-region-label.is-tint-4 { fill:#3d9e9e; }
.mk-exl-node { position:absolute; border:1px solid var(--ex-line); border-radius:6px;
  background:linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)), var(--ex-panel);
  box-shadow:0 1px 6px rgba(0,0,0,.4); font-size:10px; }
.mk-exl-node.is-lit { border-color:var(--ex-dim); }
.mk-exl-node.is-open { border-color:var(--ex-accent); box-shadow:0 4px 16px rgba(0,0,0,.35); z-index:3; }
.mk-exl-node header { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 8px; cursor:grab; user-select:none; touch-action:none; }
.mk-exl-node header strong { display:flex; align-items:center; gap:5px; font:700 8px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ex-dim); }
.mk-exl-glyph { font-style:normal; font-size:9px; }
/* What kind of thing happens here — colour says it before words do. */
.mk-exl-node { border-left-width:3px; }
.mk-exl-node.is-cat-event { border-left-color:#3f9e6a; }
.mk-exl-node.is-cat-event .mk-exl-glyph { color:#3f9e6a; }
.mk-exl-node.is-cat-question { border-left-color:#c9a13d; }
.mk-exl-node.is-cat-question .mk-exl-glyph { color:#c9a13d; }
.mk-exl-node.is-cat-change { border-left-color:#4d8fd1; }
.mk-exl-node.is-cat-change .mk-exl-glyph { color:#4d8fd1; }
.mk-exl-node.is-cat-show { border-left-color:#9a6fd0; }
.mk-exl-node.is-cat-show .mk-exl-glyph { color:#9a6fd0; }
.mk-exl-node.is-cat-loop { border-left-color:#d1793f; }
.mk-exl-node.is-cat-loop .mk-exl-glyph { color:#d1793f; }
.mk-exl-node.is-open header strong { color:var(--ex-text); }
.mk-exl-node header button { border:0; background:none; color:var(--ex-dim); cursor:pointer; font-size:12px; }
.mk-exl-node header button:hover { color:var(--ex-text); }
.mk-exl-summary { padding:0 8px 6px; font:500 10px/1.3 ui-monospace,monospace; color:var(--ex-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-exl-field { display:grid; grid-template-columns:44px 1fr; gap:4px; align-items:center; padding:3px 8px; }
.mk-exl-field span { color:var(--ex-dim); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.mk-exl-field select, .mk-exl-field textarea, .mk-exl-field input { min-width:0; width:100%; font-size:10px; background:var(--ex-bg); color:var(--ex-text); border:1px solid var(--ex-line); border-radius:3px; padding:3px 4px; }
.mk-exl-field-wide { grid-template-columns:1fr; padding-bottom:6px; }
.mk-exl-pairs { display:grid; gap:3px; padding:2px 8px 8px; }
.mk-exl-pair { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.mk-exl-pair select, .mk-exl-pair-add { min-width:0; font-size:9px; background:var(--ex-bg); color:var(--ex-text); border:1px solid var(--ex-line); border-radius:3px; padding:2px 3px; }
.mk-exl-pair-add { color:var(--ex-dim); }
.mk-exl-port { position:absolute; width:10px; height:10px; border-radius:50%; border:2px solid var(--ex-line); background:var(--ex-bg); cursor:crosshair; padding:0; }
.mk-exl-port:hover { border-color:var(--ex-accent); }
.mk-exl-port.is-in { left:-6px; top:11px; }
.mk-exl-port.is-out { right:-6px; top:11px; }
.mk-exl-port.is-out.is-else { top:33px; border-style:dashed; }
.mk-exl-port.is-connected { background:var(--ex-line); }
.mk-exl-node.is-lit .mk-exl-port.is-connected, .mk-exl-node.is-open .mk-exl-port.is-connected { background:var(--ex-accent); border-color:var(--ex-accent); }
/* ── ExFront logic: the interaction graph editor ── */
.mk-media-picker { width:min(900px,96vw); height:min(620px,88vh); }
.mk-media-picker-body { display:flex; flex:1; min-height:0; }
.mk-media-picker-side { width:170px; border-right:1px solid var(--mk-border); padding:8px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.mk-media-folder { text-align:left; padding:7px 10px; border-radius:var(--mk-radius-sm); border:1px solid transparent; background:transparent; color:var(--mk-text); cursor:pointer; font-size:var(--mk-font-size-sm); }
.mk-media-folder:hover { background:var(--mk-bg-elev-2); }
.mk-media-folder.active { background:var(--mk-bg-elev-2); border-color:var(--mk-color-red); color:var(--mk-danger); font-weight:600; }
.mk-media-picker-main { flex:1; display:flex; flex-direction:column; gap:8px; padding:12px; min-width:0; }
.mk-media-search { width:100%; }
.mk-media-grid { flex:1; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; align-content:start; }
.mk-media-cell { position:relative; display:flex; flex-direction:column; gap:4px; padding:6px; border:1px solid var(--mk-border); border-radius:var(--mk-radius-sm); background:var(--mk-bg); cursor:pointer; text-align:left; }
.mk-media-cell:hover { border-color:var(--mk-focus); }
.mk-media-cell.selected { border-color:var(--mk-color-red); box-shadow:0 0 0 1px var(--mk-color-red) inset; }
.mk-media-cell img, .mk-media-cell video { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; background:var(--mk-bg-elev-2); }
.mk-media-cell-name { font-size:11px; color:var(--mk-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Media field (Form mode) ─────────────────────────────────────────────── */
.mk-media-field { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mk-media-field-thumb { width:80px; height:80px; object-fit:cover; border-radius:var(--mk-radius-sm); border:1px solid var(--mk-border); }
.mk-media-field-empty { width:80px; height:80px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--mk-border); border-radius:var(--mk-radius-sm); color:var(--mk-text-muted); font-size:11px; text-align:center; padding:6px; background:var(--mk-bg); }
.mk-media-field-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* Universal image controls for block types whose native form has no picker. */
.mk-block-media-manager {
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(221,0,122,.32);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(10,29,44,.96),rgba(8,23,36,.9));
}
.mk-block-media-manager-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mk-block-media-manager-head strong { display:block; margin-top:2px; color:#fff; font-size:16px; }
.mk-block-media-manager-head>span {
  display:inline-grid; min-width:28px; height:28px; place-items:center;
  border:1px solid rgba(221,0,122,.42); border-radius:999px;
  color:#ff7cc4; font-size:12px; font-weight:800;
}
.mk-block-media-manager>p { margin:8px 0 14px; color:rgba(229,238,246,.62); font-size:12px; line-height:1.45; }
.mk-block-media-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.mk-block-media-item {
  min-width:0; padding:11px; border:1px solid rgba(117,151,176,.2);
  border-radius:10px; background:rgba(4,16,27,.64);
}
.mk-block-media-item-head { min-height:42px; margin-bottom:8px; }
.mk-block-media-item-head strong,.mk-block-media-item-head small {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-block-media-item-head strong { color:#f4f8fb; font-size:12px; }
.mk-block-media-item-head small { margin-top:4px; color:rgba(229,238,246,.48); font-size:10px; }
.mk-block-media-preview {
  position:relative; display:grid; width:100%; aspect-ratio:16/10; margin:0 0 10px;
  padding:0; place-items:center; overflow:hidden; border:1px dashed rgba(221,0,122,.5);
  border-radius:8px; background:rgba(8,20,34,.82); color:#ff76c1; cursor:pointer;
}
.mk-block-media-preview img { width:100%; height:100%; object-fit:cover; }
.mk-block-media-preview span { z-index:1; font-size:11px; font-weight:750; }
.mk-block-media-preview img+span {
  position:absolute; inset:auto 8px 8px; padding:5px 8px; border-radius:999px;
  background:rgba(2,10,18,.82); color:#fff; opacity:0; transition:opacity 140ms ease;
}
.mk-block-media-preview:hover img+span,.mk-block-media-preview:focus-visible img+span { opacity:1; }
@media (max-width:720px) { .mk-block-media-grid { grid-template-columns:1fr; } }

/* ── Hero visual editor image slot ───────────────────────────────────────── */
.mk-visual-media-slot { position:relative; cursor:pointer; border-radius:8px; overflow:hidden; }
.mk-visual-media-slot .mk-visual-media-img { display:block; border:none; border-radius:8px; }
.mk-visual-media-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(8,10,16,.5); opacity:0; transition:opacity var(--mk-duration-fast) var(--mk-ease-standard); }
.mk-visual-media-slot:hover .mk-visual-media-overlay { opacity:1; }
.mk-visual-media-hint { display:block; font-size:11px; color:var(--mk-text-muted); margin-top:4px; }
.mk-visual-hero-add { width:100%; }

/* ── Hero WYSIWYG visual editor ──────────────────────────────────────────── */
.mk-visual-hero{flex-direction:row;align-items:center;gap:24px;padding:28px;border-radius:12px;color:#fff}
.mk-visual-hero .mk-visual-copy{flex:1 1 320px;min-width:0}
.mk-visual-hero .mk-visual-eyebrow{color:#fff;opacity:.7}
.mk-visual-hero .mk-visual-title-input{font-size:30px!important;font-weight:800;color:#fff;background:transparent;border:1px dashed transparent;border-radius:6px;padding:2px 6px;width:100%}
.mk-visual-hero .mk-visual-title-input::placeholder{color:rgba(255,255,255,.4)}
.mk-visual-hero .mk-visual-title-input:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.mk-visual-hero .mk-visual-title-input:focus{border-color:#fff;background:rgba(255,255,255,.1);outline:none}
.mk-visual-hero .mk-visual-subtitle-input{font-size:16px!important;color:rgba(255,255,255,.88);background:transparent;border:1px dashed transparent;border-radius:6px;padding:2px 6px;width:100%}
.mk-visual-hero .mk-visual-subtitle-input:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.05)}
.mk-visual-hero .mk-visual-subtitle-input:focus{border-color:#fff;outline:none}
.mk-visual-hero .mk-visual-input{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:6px}
.mk-visual-hero .mk-visual-input::placeholder{color:rgba(255,255,255,.45)}
.mk-visual-hero .mk-visual-input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14)}
.mk-visual-hero .mk-visual-field-row{margin-top:8px}
.mk-visual-cta-input{display:inline-block!important;width:auto!important;background:#CA0274!important;color:#fff!important;border:none!important;border-radius:999px!important;padding:8px 18px!important;font-weight:600;text-align:center}
.mk-visual-cta-input:focus{outline:2px solid #fff}
.mk-visual-cta-url{font-size:11px!important;opacity:.8}
.mk-visual-hero-add{margin-top:12px}

/* ── Media picker toolbar + upload ───────────────────────────────────────── */
.mk-media-picker-toolbar{display:flex;gap:8px;align-items:center}
.mk-media-picker-toolbar .mk-media-search{flex:1}
.mk-media-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.mk-media-picker-toolbar label.mk-button{cursor:pointer;display:inline-flex;align-items:center}

/* ── Hero visual editor: dark preview + style strip ─────────────────────── */
.mk-visual-hero-wrap{display:flex;flex-direction:column;gap:12px}
.mk-visual-hero{
  background:
    radial-gradient(circle at 18% 18%, rgba(202,2,116,0.22), transparent 32%),
    linear-gradient(135deg,#050814 0%, #08111f 45%, #111c2e 100%)!important;
  border:1px solid rgba(255,255,255,0.08);
  border-top:2px solid var(--mk-color-red);
}
.mk-visual-style-strip{
  border:1px solid var(--mk-border);border-radius:var(--mk-radius-md);
  background:var(--mk-bg-elev);padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.mk-visual-style-strip .mk-input-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mk-text-muted)}
/* ── Color picker in admin form ──────────────────────────────────────────── */
.mk-brand-color-row{display:flex;gap:12px;align-items:flex-start}
.mk-color-picker{width:48px;height:48px;padding:0;border:1px solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-bg);cursor:pointer;flex:none;margin-top:22px}
.mk-brand-color-fields{flex:1;display:flex;flex-direction:column;gap:8px}
/* ── Timeline preview (admin card) ───────────────────────────────────────── */
.mk-bp-timeline{gap:4px}
.mk-bp-tl-row{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-top:1px solid var(--mk-border)}
.mk-bp-tl-row:first-of-type{border-top:none}
.mk-bp-tl-num{color:var(--mk-color-red);font-weight:800;font-variant-numeric:tabular-nums;font-size:12px;min-width:1.6ch}
.mk-bp-tl-text{display:flex;flex-direction:column}
.mk-bp-tl-text strong{font-size:12px}

/* ── CRM inbox + pipeline ───────────────────────────────────────────────── */
.mk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--mk-color-red,#d33);color:#fff;font-size:11px;font-weight:700;line-height:1}
.mk-badge-muted{background:var(--mk-bg-elev,#eef);color:var(--mk-text-muted,#888)}
.mk-input-sm{font-size:13px;padding:4px 8px}

.mk-inbox{display:flex;gap:0;border:1px solid var(--mk-border,#e5e5e5);border-radius:var(--mk-radius,8px);overflow:hidden;height:calc(100vh - 180px);min-height:420px;background:var(--mk-bg,#fff)}
.mk-inbox-list{width:320px;flex:none;border-right:1px solid var(--mk-border,#eee);overflow-y:auto;background:var(--mk-bg,#fff)}
.mk-inbox-row{padding:10px 12px;border-bottom:1px solid var(--mk-border,#eee);cursor:pointer}
.mk-inbox-row:hover{background:var(--mk-bg-hover,#f7f8fa)}
.mk-inbox-row-sel{background:color-mix(in srgb,var(--mk-color-red,#d33) 10%,var(--mk-bg,#fff))}
.mk-inbox-convo{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-convo-scroll{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}

.mk-bubble-row{display:flex;width:100%}
.mk-bubble-row-in{justify-content:flex-start}
.mk-bubble-row-out{justify-content:flex-end}
.mk-bubble{max-width:74%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.4;word-break:break-word}
.mk-bubble-in{background:var(--mk-bg-elev,#f1f3f5);border:1px solid var(--mk-border,#eee)}
.mk-bubble-out{background:color-mix(in srgb,var(--mk-color-red,#d33) 88%,#000);color:#fff}
.mk-bubble-time{font-size:10px;opacity:.7;margin-top:4px}

.mk-kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.mk-kanban-col{flex:none;width:248px;background:var(--mk-bg-elev,#f7f8fa);border:1px solid var(--mk-border,#e5e5e5);border-radius:var(--mk-radius,8px);display:flex;flex-direction:column;max-height:calc(100vh - 280px)}
.mk-kanban-col-head{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;font-weight:700;border-bottom:1px solid var(--mk-border,#eee)}
.mk-kanban-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.mk-kanban-col-foot{padding:8px 12px;border-top:1px solid var(--mk-border,#eee);font-size:12px}
.mk-deal-card{background:var(--mk-bg,#fff);border:1px solid var(--mk-border,#e5e5e5);border-radius:6px;padding:10px}


/* Portfolio studio */
.mk-portfolio-studio { display: flex; flex-direction: column; gap: var(--mk-space-4); }
.mk-portfolio-studio-head, .mk-portfolio-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-space-4); flex-wrap: wrap; }
.mk-eyebrow { display: inline-flex; color: var(--mk-text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.mk-portfolio-studio-head h3, .mk-portfolio-form-head h3 { margin: 4px 0 0; color: var(--mk-text); font-size: 24px; line-height: 1.1; }
.mk-portfolio-studio-head p { margin: 8px 0 0; max-width: 620px; color: var(--mk-text-muted); }
.mk-portfolio-count { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: var(--mk-bg-elev); color: var(--mk-text-muted); font-weight: 700; }
.mk-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--mk-space-5); }
.mk-portfolio-workspace { min-width: 0; }
.mk-portfolio-workspace.is-editing { grid-column: 1 / -1; }
/* This card is a deliberate always-dark treatment (the pink radial glow is
   part of the portfolio brand identity), not a themeable surface. It's now
   included in the "Dark-panel theme restoration" rule further down this
   file, which re-scopes --mk-text/--mk-text-muted/--mk-border to fixed dark-
   appropriate values here — the card was previously missing from that list,
   so every label and button on it read the light-mode values instead and
   went dark-on-dark under `prefers-color-scheme: light`. */
.mk-portfolio-card, .mk-portfolio-editor-shell {
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: radial-gradient(circle at 85% 8%, rgba(215, 38, 62, 0.16), transparent 38%), linear-gradient(150deg, rgba(26, 52, 72, 0.96), rgba(4, 9, 23, 0.99));
  box-shadow: var(--mk-shadow-1);
  overflow: hidden;
}
.mk-portfolio-workspace.is-editing .mk-portfolio-card { border-color: rgba(215, 38, 62, 0.65); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28); }
.mk-portfolio-shot { position: relative; aspect-ratio: 16 / 9; min-height: 190px; overflow: hidden; background: #060b1a; }
.mk-portfolio-shot img, .mk-portfolio-preview-frame img, .mk-portfolio-upload-preview img, .mk-portfolio-gallery-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-portfolio-shot-shade, .mk-portfolio-preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 4, 15, 0.12), rgba(2, 4, 15, 0.78)), linear-gradient(90deg, rgba(2, 4, 15, 0.2), rgba(2, 4, 15, 0.05)); pointer-events: none; }
.mk-portfolio-shot-empty, .mk-portfolio-preview-empty { display: grid; place-items: center; height: 100%; color: var(--mk-text-muted); background: linear-gradient(135deg, rgba(215, 38, 62, 0.12), transparent), repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px); }
.mk-portfolio-tags { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.mk-portfolio-tags span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; background: rgba(215, 38, 62, 0.9); color: var(--mk-color-white); font-size: 11px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mk-portfolio-tags.is-static { position: static; margin-top: var(--mk-space-3); }
.mk-portfolio-status { position: absolute; top: 12px; right: 12px; z-index: 2; }
.mk-portfolio-copy { display: flex; flex-direction: column; gap: 10px; padding: var(--mk-space-4); }
.mk-portfolio-copy-head { display: flex; flex-direction: column; gap: 6px; }
.mk-portfolio-copy h4 { margin: 0; color: var(--mk-text); font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.mk-portfolio-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mk-text-muted); font-size: 12px; }
.mk-portfolio-locale-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.06); color: var(--mk-text); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; }
.mk-portfolio-byline code { padding: 3px 8px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.06); color: var(--mk-text-muted); font-size: 11px; }
.mk-portfolio-featured { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--mk-radius-pill); background: rgba(215, 38, 62, 0.22); color: #ff9fb2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-portfolio-subtitle { margin: 0; color: var(--mk-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.mk-portfolio-desc { margin: 0; color: var(--mk-text-muted); font-size: 13px; line-height: 1.55; }
.mk-portfolio-desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mk-portfolio-meta, .mk-portfolio-preview-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; color: var(--mk-text-muted); font-size: 12px; }
.mk-portfolio-meta code, .mk-portfolio-meta strong, .mk-portfolio-preview-facts span { padding: 4px 8px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.04); color: var(--mk-text); }
.mk-portfolio-actions { display: flex; flex-direction: column; gap: 10px; padding: 4px var(--mk-space-4) var(--mk-space-4); }
.mk-portfolio-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-space-2); padding: 0 var(--mk-space-4) var(--mk-space-4); }
.mk-portfolio-primary-action { width: 100%; }
.mk-portfolio-actions-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-portfolio-actions-secondary .mk-button-danger { margin-left: auto; }
.mk-portfolio-editor-shell { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0; margin-top: var(--mk-space-4); min-height: 78vh; }
.mk-portfolio-form-panel { position: sticky; top: var(--mk-space-4); align-self: start; max-height: calc(100vh - var(--mk-space-5)); overflow: auto; padding: var(--mk-space-5); border-right: 1px solid rgba(255, 255, 255, 0.12); background: rgba(3, 7, 20, 0.5); }
.mk-portfolio-site-preview { min-width: 0; padding: var(--mk-space-4); background: linear-gradient(180deg, rgba(4, 9, 23, 0.96), rgba(4, 9, 23, 0.78)); }
.mk-portfolio-preview-toolbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-3); flex-wrap: wrap; margin: calc(var(--mk-space-4) * -1) calc(var(--mk-space-4) * -1) var(--mk-space-4); padding: var(--mk-space-3) var(--mk-space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: rgba(6, 12, 28, 0.94); backdrop-filter: blur(14px); }
.mk-portfolio-preview-toolbar strong { display: block; margin-top: 2px; color: var(--mk-text); font-size: 13px; }
.mk-portfolio-device-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.04); }
.mk-portfolio-device-switch button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--mk-radius-pill); background: transparent; color: var(--mk-text-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.mk-portfolio-device-switch button.is-active { background: var(--mk-color-red); color: var(--mk-color-white); box-shadow: 0 10px 24px rgba(215, 38, 62, 0.28); }
.mk-portfolio-browser-preview { display: flex; justify-content: center; min-height: 720px; overflow: auto; padding: var(--mk-space-4); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--mk-radius-md); background: radial-gradient(circle at 50% 0%, rgba(215, 38, 62, 0.14), transparent 32%), #030714; }
.mk-portfolio-browser-preview iframe { display: block; width: 100%; height: 760px; border: 0; border-radius: 8px; background: #050816; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42); }
.mk-portfolio-browser-preview.is-desktop iframe { flex: 0 0 1440px; width: 1440px; min-width: 1440px; max-width: none; height: 820px; }
.mk-portfolio-browser-preview.is-tablet iframe { flex: 0 0 768px; width: 768px; min-width: 768px; max-width: none; height: 1024px; }
.mk-portfolio-browser-preview.is-mobile iframe { flex: 0 0 390px; width: 390px; min-width: 390px; max-width: none; height: 844px; }
.mk-portfolio-preview-frame { position: sticky; top: var(--mk-space-4); min-height: 360px; overflow: hidden; background: #040917; }
.mk-portfolio-preview-copy { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; }
.mk-portfolio-preview-copy span { color: var(--mk-color-red); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-portfolio-preview-copy h3 { margin: 8px 0; color: var(--mk-color-white); font-size: clamp(28px, 5vw, 52px); line-height: 0.98; text-transform: uppercase; }
.mk-portfolio-preview-copy p, .mk-portfolio-preview-body p { margin: 0; color: var(--mk-text-muted); }
.mk-portfolio-preview-body { padding: var(--mk-space-5); }
.mk-portfolio-edit-section { margin-top: var(--mk-space-5); padding-top: var(--mk-space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mk-portfolio-edit-section h4 { margin: 0 0 var(--mk-space-3); color: var(--mk-text); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.mk-portfolio-upload-grid { display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1.2fr); gap: var(--mk-space-3); }
.mk-portfolio-upload-card { display: flex; flex-direction: column; gap: var(--mk-space-2); padding: var(--mk-space-3); border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255, 255, 255, 0.035); cursor: pointer; }
.mk-portfolio-upload-card input, .mk-portfolio-gallery-editor input { display: none; }
.mk-portfolio-upload-card span { color: var(--mk-text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.mk-portfolio-upload-card strong { color: var(--mk-color-red); font-size: 13px; }
.mk-portfolio-upload-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--mk-radius-sm); background: rgba(0, 0, 0, 0.24); color: var(--mk-text-muted); }
.mk-portfolio-upload-card.is-wide .mk-portfolio-upload-preview { aspect-ratio: 16 / 9; }
.mk-portfolio-upload-preview.is-loading { opacity: 0.55; }
.mk-portfolio-gallery-editor { display: flex; align-items: flex-start; gap: var(--mk-space-3); flex-wrap: wrap; margin-top: var(--mk-space-3); }
.mk-portfolio-gallery-strip { display: flex; flex: 1; min-width: 220px; min-height: 76px; gap: var(--mk-space-2); overflow-x: auto; padding: var(--mk-space-2); border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255, 255, 255, 0.035); }
.mk-portfolio-gallery-strip img { flex: 0 0 96px; width: 96px; border-radius: var(--mk-radius-sm); }
.mk-portfolio-gallery-strip span { align-self: center; color: var(--mk-text-muted); }
@media (max-width: 680px) { .mk-portfolio-editor-shell { grid-template-columns: 1fr; } .mk-portfolio-form-panel { position: relative; top: auto; max-height: none; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mk-portfolio-preview-frame { position: relative; top: auto; } .mk-portfolio-browser-preview { min-height: 560px; padding: var(--mk-space-3); } }
@media (max-width: 620px) { .mk-portfolio-grid, .mk-portfolio-upload-grid { grid-template-columns: 1fr; } .mk-portfolio-form-panel, .mk-portfolio-preview-body { padding: var(--mk-space-4); } .mk-portfolio-shot { min-height: 160px; } }


/* Page editor studio */
.mk-page-studio { display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr) minmax(220px, 240px); gap: var(--mk-space-4); align-items: start; width: min(1680px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.mk-page-control-panel { position: sticky; top: var(--mk-space-4); display: flex; flex-direction: column; gap: var(--mk-space-4); max-height: calc(100vh - var(--mk-space-5)); overflow: auto; padding-right: 4px; }
.mk-page-control-card { margin: 0; }
.mk-page-blocks-card { overflow: visible; }
.mk-page-block-list { display: flex; flex-direction: column; gap: 0; }
.mk-page-insert-slot { display: grid; min-height: 24px; scroll-margin: 20px; }
.mk-page-insert-button {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mk-text-muted);
  cursor: pointer;
}
.mk-page-insert-button::before,.mk-page-insert-button::after {
  content: "";
  height: 1px;
  background: var(--mk-border);
  transition: background-color var(--mk-duration-fast), transform var(--mk-duration-fast);
}
.mk-page-insert-button>span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--mk-border);
  border-radius: 50%;
  background: var(--mk-surface);
  color: var(--mk-danger);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transition: border-color var(--mk-duration-fast), background-color var(--mk-duration-fast), color var(--mk-duration-fast), transform var(--mk-duration-fast);
}
.mk-page-insert-button>small {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--mk-color-red);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  transition: max-width var(--mk-duration-fast), opacity var(--mk-duration-fast);
}
.mk-page-insert-button:hover::before,.mk-page-insert-button:hover::after,.mk-page-insert-button:focus-visible::before,.mk-page-insert-button:focus-visible::after { background: rgba(215,38,62,.58); }
.mk-page-insert-button:hover>span,.mk-page-insert-button:focus-visible>span { border-color: var(--mk-color-red); background: var(--mk-color-red); color: #fff; transform: scale(1.08); }
.mk-page-insert-button:hover>small,.mk-page-insert-button:focus-visible>small { max-width: 110px; opacity: 1; }
.mk-page-insert-button:focus-visible { outline: 0; }
.mk-page-insert-slot.is-open {
  gap: 8px;
  margin: 8px 0 14px;
  padding: 10px;
  border: 1px solid rgba(215,38,62,.56);
  border-radius: var(--mk-radius-md);
  background: color-mix(in srgb,var(--mk-color-red) 5%,var(--mk-surface));
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.mk-page-insert-slot-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--mk-text); font-size:11px; }
.mk-page-insert-slot.is-open .mk-add-block-form { margin:0; border-color:var(--mk-border); box-shadow:none; }
.mk-add-block-position { color:var(--mk-color-red); font-size:10px; font-weight:800; text-align:right; }
.mk-page-block-row { border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255,255,255,0.035); padding: var(--mk-space-3); }
.mk-page-block-row.is-editing { border-color: rgba(215, 38, 62, 0.7); box-shadow: 0 14px 36px rgba(0,0,0,0.25); }
.mk-page-block-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-space-2); }
.mk-page-block-main { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--mk-text); text-align: left; cursor: pointer; }
.mk-page-block-main strong { display: block; line-height: 1.2; }
.mk-page-block-main small { display: block; margin-top: 2px; color: var(--mk-text-muted); font-size: 11px; }
.mk-page-block-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 160px; }
.mk-page-block-summary { margin: 8px 0 0; color: var(--mk-text-muted); font-size: 12px; line-height: 1.4; }
.mk-page-block-row .mk-block-editor { margin-top: var(--mk-space-3); padding-top: var(--mk-space-3); border-top: 1px solid rgba(255,255,255,0.12); }
.mk-page-live-preview { min-width: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(4,9,23,0.96), rgba(4,9,23,0.78)); box-shadow: var(--mk-shadow-1); }
.mk-page-preview-toolbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-3); flex-wrap: wrap; padding: var(--mk-space-3) var(--mk-space-4); border-bottom: 1px solid rgba(255,255,255,0.12); background: rgba(6,12,28,0.94); backdrop-filter: blur(14px); }
.mk-page-preview-toolbar strong { display: block; margin-top: 2px; color: var(--mk-text); font-size: 13px; }
.mk-page-preview-toolbar small { display: block; margin-top: 3px; color: var(--mk-text-muted); font-size: 11px; line-height: 1.35; }
.mk-page-history-panel { position: sticky; top: var(--mk-space-4); display: flex; flex-direction: column; max-height: calc(100vh - var(--mk-space-5)); overflow: hidden; padding: var(--mk-space-4); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: var(--mk-surface); box-shadow: var(--mk-shadow-1); }
.mk-page-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-space-2); padding-bottom: var(--mk-space-3); border-bottom: 1px solid var(--mk-border); }
.mk-page-history-head strong { display: block; margin-top: 3px; color: var(--mk-text); font-size: 15px; }
.mk-page-history-position { flex: 0 0 auto; padding: 4px 8px; border-radius: var(--mk-radius-pill); background: var(--mk-bg-elev-2); color: var(--mk-text-muted); font-size: 11px; font-weight: 800; }
.mk-page-history-hint { margin: var(--mk-space-3) 0; color: var(--mk-text-muted); font-size: 11px; line-height: 1.45; }
.mk-page-history-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-space-2); padding-bottom: var(--mk-space-3); border-bottom: 1px solid var(--mk-border); }
.mk-page-history-actions .mk-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; gap: 1px; }
.mk-page-history-actions kbd { color: var(--mk-text-muted); font: 700 9px/1.2 var(--mk-font-sans); letter-spacing: .03em; }
.mk-page-history-empty { display: grid; grid-template-columns: 28px 1fr; gap: 3px var(--mk-space-2); margin-top: var(--mk-space-3); padding: var(--mk-space-3); border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); background: var(--mk-bg-elev); }
.mk-page-history-empty > span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mk-bg-elev-2); color: var(--mk-text-muted); font-size: 11px; font-weight: 900; }
.mk-page-history-empty strong { color: var(--mk-text); font-size: 12px; }
.mk-page-history-empty small { color: var(--mk-text-muted); font-size: 10px; line-height: 1.4; }
.mk-page-history-list { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; margin-top: var(--mk-space-3); overflow: auto; padding: 2px 3px 2px 0; }
.mk-page-history-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--mk-space-2); width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--mk-radius-sm); background: transparent; color: var(--mk-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--mk-duration-fast), background var(--mk-duration-fast), opacity var(--mk-duration-fast); }
.mk-page-history-step:hover { border-color: var(--mk-border); background: var(--mk-bg-elev); }
.mk-page-history-step > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--mk-border); border-radius: 50%; background: var(--mk-bg-elev); color: var(--mk-text-muted); font-size: 10px; font-weight: 900; }
.mk-page-history-step strong, .mk-page-history-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-page-history-step strong { font-size: 11px; }
.mk-page-history-step small { margin-top: 2px; color: var(--mk-text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.mk-page-history-step.is-current { border-color: rgba(215, 38, 62, .72); background: color-mix(in srgb, var(--mk-color-red) 10%, var(--mk-surface)); }
.mk-page-history-step.is-current > span { border-color: var(--mk-color-red); background: var(--mk-color-red); color: var(--mk-color-white); }
.mk-page-history-step.is-future { opacity: .48; }
.mk-page-browser-preview { --frame-w: 1440px; --frame-h: 900px; --scaled-w: 936px; --scaled-h: 585px; --frame-scale: .65; display: flex; justify-content: center; align-items: flex-start; min-height: calc(var(--scaled-h) + (var(--mk-space-4) * 2)); overflow: hidden; padding: var(--mk-space-4); background: radial-gradient(circle at 50% 0%, rgba(215,38,62,0.14), transparent 32%), #030714; }
.mk-page-preview-scale { flex: 0 0 var(--scaled-w); width: var(--scaled-w); height: var(--scaled-h); overflow: hidden; border-radius: 8px; box-shadow: 0 18px 60px rgba(0,0,0,0.42); background: #050816; }
.mk-page-browser-preview iframe { display: block; width: var(--frame-w); height: var(--frame-h); border: 0; border-radius: 8px; background: #050816; transform: scale(var(--frame-scale)); transform-origin: top left; }

.mk-page-block-row:not(.is-editing) { cursor: grab; }
.mk-page-block-row:not(.is-editing):active { cursor: grabbing; }
.mk-page-block-row.is-dragging { opacity: .48; border-style: dashed; transform: scale(.992); }
.mk-page-block-row:not(.is-editing):hover { border-color: rgba(215,38,62,.48); }

/* ── CRM inbox + pipeline ───────────────────────────────────────────────── */
.mk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--mk-color-red,#d33);color:#fff;font-size:11px;font-weight:700;line-height:1}
.mk-badge-muted{background:var(--mk-bg-elev,#eef);color:var(--mk-text-muted,#888)}
.mk-input-sm{font-size:13px;padding:4px 8px}

.mk-inbox{display:flex;gap:0;border:1px solid var(--mk-border,#e5e5e5);border-radius:var(--mk-radius,8px);overflow:hidden;height:calc(100vh - 180px);min-height:420px;background:var(--mk-bg,#fff)}
.mk-inbox-list{width:320px;flex:none;border-right:1px solid var(--mk-border,#eee);overflow-y:auto;background:var(--mk-bg,#fff)}
.mk-inbox-row{padding:10px 12px;border-bottom:1px solid var(--mk-border,#eee);cursor:pointer}
.mk-inbox-row:hover{background:var(--mk-bg-hover,#f7f8fa)}
.mk-inbox-row-sel{background:color-mix(in srgb,var(--mk-color-red,#d33) 10%,var(--mk-bg,#fff))}
.mk-inbox-convo{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-convo-scroll{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}

.mk-bubble-row{display:flex;width:100%}
.mk-bubble-row-in{justify-content:flex-start}
.mk-bubble-row-out{justify-content:flex-end}
.mk-bubble{max-width:74%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.4;word-break:break-word}
.mk-bubble-in{background:var(--mk-bg-elev,#f1f3f5);border:1px solid var(--mk-border,#eee)}
.mk-bubble-out{background:color-mix(in srgb,var(--mk-color-red,#d33) 88%,#000);color:#fff}
.mk-bubble-time{font-size:10px;opacity:.7;margin-top:4px}

.mk-kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.mk-kanban-col{flex:none;width:248px;background:var(--mk-bg-elev,#f7f8fa);border:1px solid var(--mk-border,#e5e5e5);border-radius:var(--mk-radius,8px);display:flex;flex-direction:column;max-height:calc(100vh - 280px)}
.mk-kanban-col-head{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;font-weight:700;border-bottom:1px solid var(--mk-border,#eee)}
.mk-kanban-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.mk-kanban-col-foot{padding:8px 12px;border-top:1px solid var(--mk-border,#eee);font-size:12px}
.mk-deal-card{background:var(--mk-bg,#fff);border:1px solid var(--mk-border,#e5e5e5);border-radius:6px;padding:10px}


/* Portfolio studio */
.mk-portfolio-studio { display: flex; flex-direction: column; gap: var(--mk-space-4); }
.mk-portfolio-studio-head, .mk-portfolio-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-space-4); flex-wrap: wrap; }
.mk-eyebrow { display: inline-flex; color: var(--mk-text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.mk-portfolio-studio-head h3, .mk-portfolio-form-head h3 { margin: 4px 0 0; color: var(--mk-text); font-size: 24px; line-height: 1.1; }
.mk-portfolio-studio-head p { margin: 8px 0 0; max-width: 620px; color: var(--mk-text-muted); }
.mk-portfolio-count { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: var(--mk-bg-elev); color: var(--mk-text-muted); font-weight: 700; }
.mk-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--mk-space-5); }
.mk-portfolio-workspace { min-width: 0; }
/* This card is a deliberate always-dark treatment (the pink radial glow is
   part of the portfolio brand identity), not a themeable surface. It's now
   included in the "Dark-panel theme restoration" rule further down this
   file, which re-scopes --mk-text/--mk-text-muted/--mk-border to fixed dark-
   appropriate values here — the card was previously missing from that list,
   so every label and button on it read the light-mode values instead and
   went dark-on-dark under `prefers-color-scheme: light`. */
.mk-portfolio-card, .mk-portfolio-editor-shell {
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: radial-gradient(circle at 85% 8%, rgba(215, 38, 62, 0.16), transparent 38%), linear-gradient(150deg, rgba(26, 52, 72, 0.96), rgba(4, 9, 23, 0.99));
  box-shadow: var(--mk-shadow-1);
  overflow: hidden;
}
.mk-portfolio-workspace.is-editing .mk-portfolio-card { border-color: rgba(215, 38, 62, 0.65); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28); }
.mk-portfolio-shot { position: relative; aspect-ratio: 16 / 9; min-height: 190px; overflow: hidden; background: #060b1a; }
.mk-portfolio-shot img, .mk-portfolio-preview-frame img, .mk-portfolio-upload-preview img, .mk-portfolio-gallery-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-portfolio-shot-shade, .mk-portfolio-preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 4, 15, 0.12), rgba(2, 4, 15, 0.78)), linear-gradient(90deg, rgba(2, 4, 15, 0.2), rgba(2, 4, 15, 0.05)); pointer-events: none; }
.mk-portfolio-shot-empty, .mk-portfolio-preview-empty { display: grid; place-items: center; height: 100%; color: var(--mk-text-muted); background: linear-gradient(135deg, rgba(215, 38, 62, 0.12), transparent), repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px); }
.mk-portfolio-tags { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.mk-portfolio-tags span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; background: rgba(215, 38, 62, 0.9); color: var(--mk-color-white); font-size: 11px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mk-portfolio-tags.is-static { position: static; margin-top: var(--mk-space-3); }
.mk-portfolio-status { position: absolute; top: 12px; right: 12px; z-index: 2; }
.mk-portfolio-copy { display: flex; flex-direction: column; gap: 10px; padding: var(--mk-space-4); }
.mk-portfolio-copy-head { display: flex; flex-direction: column; gap: 6px; }
.mk-portfolio-copy h4 { margin: 0; color: var(--mk-text); font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.mk-portfolio-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mk-text-muted); font-size: 12px; }
.mk-portfolio-locale-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.06); color: var(--mk-text); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; }
.mk-portfolio-byline code { padding: 3px 8px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.06); color: var(--mk-text-muted); font-size: 11px; }
.mk-portfolio-featured { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--mk-radius-pill); background: rgba(215, 38, 62, 0.22); color: #ff9fb2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-portfolio-subtitle { margin: 0; color: var(--mk-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.mk-portfolio-desc { margin: 0; color: var(--mk-text-muted); font-size: 13px; line-height: 1.55; }
.mk-portfolio-desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mk-portfolio-meta, .mk-portfolio-preview-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; color: var(--mk-text-muted); font-size: 12px; }
.mk-portfolio-meta code, .mk-portfolio-meta strong, .mk-portfolio-preview-facts span { padding: 4px 8px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: rgba(255, 255, 255, 0.04); color: var(--mk-text); }
.mk-portfolio-actions { display: flex; flex-direction: column; gap: 10px; padding: 4px var(--mk-space-4) var(--mk-space-4); }
.mk-portfolio-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-space-2); padding: 0 var(--mk-space-4) var(--mk-space-4); }
.mk-portfolio-primary-action { width: 100%; }
.mk-portfolio-actions-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-portfolio-actions-secondary .mk-button-danger { margin-left: auto; }
.mk-portfolio-editor-shell { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr); gap: 0; margin-top: var(--mk-space-4); }
.mk-portfolio-live-preview { border-right: 1px solid rgba(255, 255, 255, 0.12); background: rgba(3, 7, 20, 0.58); }
.mk-portfolio-preview-frame { position: sticky; top: var(--mk-space-4); min-height: 360px; overflow: hidden; background: #040917; }
.mk-portfolio-preview-copy { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; }
.mk-portfolio-preview-copy span { color: var(--mk-color-red); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-portfolio-preview-copy h3 { margin: 8px 0; color: var(--mk-color-white); font-size: clamp(28px, 5vw, 52px); line-height: 0.98; text-transform: uppercase; }
.mk-portfolio-preview-copy p, .mk-portfolio-preview-body p { margin: 0; color: var(--mk-text-muted); }
.mk-portfolio-preview-body { padding: var(--mk-space-5); }
.mk-portfolio-form-panel { padding: var(--mk-space-5); }
.mk-portfolio-edit-section { margin-top: var(--mk-space-5); padding-top: var(--mk-space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mk-portfolio-edit-section h4 { margin: 0 0 var(--mk-space-3); color: var(--mk-text); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.mk-portfolio-upload-grid { display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1.2fr); gap: var(--mk-space-3); }
.mk-portfolio-upload-card { display: flex; flex-direction: column; gap: var(--mk-space-2); padding: var(--mk-space-3); border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255, 255, 255, 0.035); cursor: pointer; }
.mk-portfolio-upload-card input, .mk-portfolio-gallery-editor input { display: none; }
.mk-portfolio-upload-card span { color: var(--mk-text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.mk-portfolio-upload-card strong { color: var(--mk-color-red); font-size: 13px; }
.mk-portfolio-upload-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--mk-radius-sm); background: rgba(0, 0, 0, 0.24); color: var(--mk-text-muted); }
.mk-portfolio-upload-card.is-wide .mk-portfolio-upload-preview { aspect-ratio: 16 / 9; }
.mk-portfolio-upload-preview.is-loading { opacity: 0.55; }
.mk-portfolio-gallery-editor { display: flex; align-items: flex-start; gap: var(--mk-space-3); flex-wrap: wrap; margin-top: var(--mk-space-3); }
.mk-portfolio-gallery-strip { display: flex; flex: 1; min-width: 220px; min-height: 76px; gap: var(--mk-space-2); overflow-x: auto; padding: var(--mk-space-2); border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255, 255, 255, 0.035); }
.mk-portfolio-gallery-strip img { flex: 0 0 96px; width: 96px; border-radius: var(--mk-radius-sm); }
.mk-portfolio-gallery-strip span { align-self: center; color: var(--mk-text-muted); }
@media (max-width: 960px) { .mk-portfolio-editor-shell { grid-template-columns: 1fr; } .mk-portfolio-live-preview { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mk-portfolio-preview-frame { position: relative; top: auto; } }
@media (max-width: 620px) { .mk-portfolio-grid, .mk-portfolio-upload-grid { grid-template-columns: 1fr; } .mk-portfolio-form-panel, .mk-portfolio-preview-body { padding: var(--mk-space-4); } .mk-portfolio-shot { min-height: 160px; } }
/* Homepage studio localized section editor */
.mk-home-section-form {
  display: grid;
  gap: 18px;
}

.mk-home-section-status,
.mk-home-section-options {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(4,13,28,.48);
}

.mk-home-section-status small {
  display: block;
  margin-top: 8px;
  color: var(--mk-text-muted, #91a0b6);
  line-height: 1.45;
}

.mk-toggle-row {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.mk-home-locale-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mk-home-locale-tabs button {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--mk-border);
  background: var(--mk-bg-elev);
  color: var(--mk-text-muted);
  text-align: left;
  cursor: pointer;
  border-radius: var(--mk-radius-sm);
  transition: border-color var(--mk-duration-fast) var(--mk-ease-standard),
    background var(--mk-duration-fast) var(--mk-ease-standard);
}

.mk-home-locale-tabs button:hover {
  border-color: var(--mk-color-red);
  background: var(--mk-bg-elev-2);
}

.mk-home-locale-tabs button strong,
.mk-home-locale-tabs button span {
  display: block;
}

.mk-home-locale-tabs button strong {
  color: var(--mk-text);
  font-size: 12px;
  letter-spacing: .12em;
}

.mk-home-locale-tabs button span {
  margin-top: 3px;
  color: var(--mk-text-muted);
  font-size: 11px;
}

.mk-home-locale-tabs button.is-active {
  border-color: var(--mk-color-red);
  box-shadow: inset 0 -2px var(--mk-color-red);
  background: var(--pm-accent-soft);
}

.mk-home-locale-tabs button.is-active strong {
  color: var(--mk-color-red-hover);
}

.mk-home-copy-fields {
  display: grid;
  gap: 12px;
}

.mk-home-section-options {
  display: grid;
  gap: 12px;
}

.mk-home-section-options h4 {
  margin: 0;
  color: #fff;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ═══ Block type categories: horizontal scroll rail ═══ */
.mk-add-block-form { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
.mk-block-type-picker {
    display: block;
    width: 100%; max-width: 100%; min-width: 0;
    overflow: hidden;
}
.mk-block-type-categories {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 10px;
    width: 100%; max-width: 100%; min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px;
    scrollbar-width: thin;
}
.mk-block-type-categories::-webkit-scrollbar { height: 4px; }
.mk-block-type-category {
    flex: 0 0 clamp(160px, 42%, 210px);
    width: clamp(160px, 42%, 210px);
    min-width: 160px;
    max-width: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: var(--mk-bg-elev);
    color: var(--mk-text);
    font-size: var(--mk-font-size-sm);
    cursor: pointer;
    scroll-snap-align: start;
    overflow: hidden;
    transition: background var(--mk-duration-fast) var(--mk-ease-standard), border-color var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-block-type-category:hover { background: var(--mk-bg-elev-2); }
.mk-block-type-category.is-active {
    border-color: var(--mk-color-red);
    background: var(--mk-bg-elev-2);
    color: var(--mk-danger);
}
.mk-block-type-category strong {
    font-size: 13px; font-weight: 600;
    display: -webkit-box; overflow: hidden;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-height: 1.2;
}
.mk-block-type-category-count { font-size: 11px; opacity: 0.6; }

/* ═══ Block type results: single category below ═══ */
.mk-block-type-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%; max-width: 100%; min-width: 0;
    margin-top: 18px;
}
.mk-block-type-result-label {
    font-size: var(--mk-font-size-sm);
    font-weight: 600;
    color: var(--mk-text-muted);
    margin: 0 0 8px;
}
.mk-block-type-result-group { width: 100%; min-width: 0; }

/* ═══ Canvas: production blocks mode ═══ */
.mk-canvas-mode-toggle { display:flex; gap:4px; margin-left:auto; }
.mk-canvas-mode-toggle .is-active { background:var(--mk-color-red); color:#fff; }
.mk-canvas-production-layer { background:#000415; overflow:hidden; }
.mk-canvas-production-layer iframe { pointer-events:none; }
.mk-canvas-block-hotspot { cursor:pointer; border:2px solid transparent; transition:border-color 120ms ease; box-sizing:border-box; position:absolute; left:0; right:0; }
.mk-canvas-block-hotspot:hover { border-color:rgba(59,130,246,.5) !important; }
.mk-canvas-block-hotspot.is-selected { border-color:#3b82f6 !important; }
.mk-canvas-block-hotspot-label { position:absolute; top:4px; left:8px; font-size:11px; color:#3b82f6; background:rgba(0,0,0,.7); padding:2px 6px; border-radius:3px; pointer-events:none; }
.mk-canvas-blocks-section { margin-top:14px; border-top:1px solid #1e1e3a; padding-top:12px; }
.mk-canvas-block-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; border:1px solid transparent; }
.mk-canvas-block-row:hover { background:rgba(255,255,255,.03); }
.mk-canvas-block-row.is-selected { border-color:#ca0274; background:rgba(202,2,116,0.1); }
.mk-canvas-block-editor { display:flex; flex-direction:column; gap:12px; }
.mk-canvas-block-editor-header { display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid #2a2f4e; }
.mk-translation-group-row {
  background: color-mix(in srgb, var(--mk-accent, #4f46e5) 7%, transparent);
}

.mk-translation-group-row td {
  border-top: 1px solid color-mix(in srgb, var(--mk-accent, #4f46e5) 22%, transparent);
}

.mk-translation-child-row td:first-child {
  padding-left: 28px;
}

.mk-translation-project-group {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.mk-translation-project-summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto 28px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mk-translation-project-summary code,
.mk-translation-project-summary strong {
  display: block;
}

.mk-translation-project-summary code {
  margin-top: 5px;
  opacity: 0.85;
}

.mk-translation-project-thumb {
  width: 72px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.mk-translation-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-translation-project-children {
  display: grid;
  gap: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 700px) {
  .mk-translation-project-summary {
    grid-template-columns: 56px minmax(0, 1fr) 24px;
  }

  .mk-translation-project-summary .mk-badge {
    grid-column: 2;
  }

  .mk-translation-project-thumb {
    width: 56px;
  }
}

/* ProdMedia control shell -------------------------------------------------- */

.mk-app-control,
.pm-auth-shell {
  color-scheme: light;
  color: var(--mk-text);
  --mk-color-red: #b80069;
  --mk-color-red-hover: #9f005b;
  --mk-color-white: #ffffff;
  --mk-danger: #b42318;
  --mk-success: #147d53;
  --mk-bg: #f6f5f7;
  --mk-bg-elev: #ffffff;
  --mk-bg-elev-2: #efedf1;
  --mk-bg-hover: #ebe8ed;
  --mk-surface: #ffffff;
  --mk-text: #1d1a21;
  --mk-text-muted: #625d68;
  --mk-border: #dcd8e0;
  --mk-focus: #7c3aed;
  --mk-accent: var(--mk-color-red);
  --mk-accent-hover: var(--mk-color-red-hover);
  --mk-radius: var(--mk-radius-md);
  --mk-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --pm-sidebar: #17141b;
  --pm-sidebar-text: #f8f6f9;
  --pm-sidebar-muted: #aaa3af;
  --pm-sidebar-border: #302a35;
  --pm-sidebar-hover: #27212b;
  --pm-sidebar-selected: #33232e;
  --pm-accent-soft: #f8e8f1;
  background: var(--mk-bg);
}

.pm-admin-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  grid-template-rows: minmax(100vh, auto);
  width: 100%;
  min-height: 100vh;
}

.pm-admin-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 272px;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  color: var(--pm-sidebar-text);
  background: var(--pm-sidebar);
  border-right: 1px solid var(--pm-sidebar-border);
}

.pm-admin-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 16px;
  border-bottom: 1px solid var(--pm-sidebar-border);
}

.pm-control-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}

.pm-control-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--mk-color-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pm-control-brand-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.pm-control-brand-copy strong,
.pm-control-brand-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-control-brand-copy strong {
  color: inherit;
  font-size: 14px;
  line-height: 1.35;
}

.pm-control-brand-copy small {
  color: var(--pm-sidebar-muted);
  font-size: 12px;
}

.pm-control-brand.is-compact .pm-control-brand-mark {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.pm-control-brand.is-compact .pm-control-brand-copy strong {
  max-width: 48vw;
  color: var(--mk-text);
}

.pm-sidebar-close {
  display: none;
}

/* Collapsible global sidebar --------------------------------------------- */
.pm-admin-shell-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}
.pm-admin-sidebar.is-collapsed {
  width: 64px;
}
.pm-sidebar-collapse-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border: 1px solid var(--pm-sidebar-border);
  border-radius: var(--mk-radius-pill);
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mk-duration-fast) var(--mk-ease-standard);
}
.pm-sidebar-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}
.pm-admin-sidebar.is-collapsed .pm-admin-sidebar-head {
  justify-content: center;
  padding: 16px 8px;
}
.pm-admin-sidebar.is-collapsed .pm-control-brand-copy,
.pm-admin-sidebar.is-collapsed .pm-admin-nav-group h2,
.pm-admin-sidebar.is-collapsed .pm-admin-nav-disclosure summary,
.pm-admin-sidebar.is-collapsed .pm-site-nav-context,
.pm-admin-sidebar.is-collapsed .pm-admin-account {
  display: none;
}
.pm-admin-sidebar.is-collapsed .pm-admin-nav-link span {
  display: none;
}
.pm-admin-sidebar.is-collapsed .pm-admin-nav-link {
  justify-content: center;
  padding-inline: 0;
}
.pm-admin-sidebar.is-collapsed .pm-admin-nav-details {
  padding-left: 0;
}
.pm-admin-sidebar.is-collapsed .pm-admin-nav-disclosure {
  margin: 0;
}

.pm-admin-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 24px;
  scrollbar-width: thin;
  scrollbar-color: #47404c transparent;
}

.pm-admin-nav-group {
  display: grid;
  gap: 3px;
  margin: 0 0 18px;
}

.pm-admin-nav-group h2 {
  margin: 0;
  padding: 5px 10px 7px;
  color: var(--pm-sidebar-muted);
  font-family: var(--mk-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.pm-admin-nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #dcd7df;
  font-size: 14px;
  font-weight: 520;
  text-decoration: none;
  transition:
    color var(--mk-duration-fast) var(--mk-ease-standard),
    background-color var(--mk-duration-fast) var(--mk-ease-standard);
}

.pm-admin-nav-link:hover {
  color: #ffffff;
  background: var(--pm-sidebar-hover);
  text-decoration: none;
}

.pm-admin-nav-link.is-active {
  color: #ffffff;
  background: var(--pm-sidebar-selected);
  font-weight: 650;
}

.pm-admin-nav-link.is-active svg {
  color: #ff68b5;
}

.pm-admin-nav-link:focus-visible,
.pm-admin-nav-disclosure summary:focus-visible,
.pm-sidebar-close:focus-visible,
.pm-mobile-menu-button:focus-visible,
.pm-admin-signout:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.pm-admin-nav-disclosure {
  margin: 0 0 8px;
}

.pm-admin-nav-disclosure summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--pm-sidebar-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
  user-select: none;
}

.pm-admin-nav-disclosure summary::-webkit-details-marker {
  display: none;
}

.pm-admin-nav-disclosure summary::after {
  content: "+";
  margin-left: auto;
  color: var(--mk-text-muted);
  font-size: 16px;
  font-weight: 400;
}

.pm-admin-nav-disclosure[open] summary::after {
  content: "−";
}

.pm-admin-nav-disclosure summary:hover {
  color: #ffffff;
  background: var(--pm-sidebar-hover);
}

.pm-admin-nav-details {
  display: grid;
  gap: 3px;
  padding: 2px 0 6px 8px;
}

.pm-site-nav-context {
  display: grid;
  gap: 2px;
  margin: 0 2px 16px;
  padding: 11px 12px;
  border: 1px solid var(--pm-sidebar-border);
  border-radius: 9px;
  background: #1d1921;
}

.pm-site-nav-context span {
  color: var(--pm-sidebar-muted);
  font-size: 12px;
}

.pm-site-nav-context code {
  overflow: hidden;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-admin-account {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid var(--pm-sidebar-border);
}

.pm-admin-avatar,
.pm-mobile-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #4a414f;
  font-size: 11px;
  font-weight: 750;
}

.pm-admin-avatar {
  width: 36px;
  height: 36px;
}

.pm-admin-account-copy {
  display: grid;
  min-width: 0;
}

.pm-admin-account-copy strong,
.pm-admin-account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-admin-account-copy strong {
  color: #ffffff;
  font-size: 12px;
}

.pm-admin-account-copy small {
  color: var(--pm-sidebar-muted);
  font-size: 11px;
}

.pm-admin-signout {
  min-height: 36px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  color: var(--pm-sidebar-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.pm-admin-signout:hover {
  color: #ffffff;
  background: var(--pm-sidebar-hover);
}

.pm-admin-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.pm-admin-mobile-header {
  display: none;
}

.pm-site-context {
  display: flex;
  align-items: center;
  min-height: 40px;
  gap: 8px;
  padding: 7px clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--mk-border);
  color: var(--mk-text-muted);
  background: var(--mk-bg-elev);
  font-size: 12px;
}

.pm-site-context code {
  color: var(--mk-text);
  font-family: var(--mk-font-mono);
  font-size: 12px;
}

.pm-admin-main {
  flex: 1;
  max-width: 1480px;
  padding: clamp(20px, 3vw, 40px);
}

.pm-admin-main > * {
  animation: none !important;
}

.mk-app-control .mk-card {
  box-shadow: none;
}

.mk-app-control .mk-card:hover {
  box-shadow: none;
}

.mk-app-control .mk-button,
.mk-app-control .mk-input,
.mk-app-control .mk-icon-btn {
  min-height: 44px;
}

.mk-app-control .mk-icon-btn {
  min-width: 44px;
}

.mk-app-control .mk-button:hover:not(:disabled),
.mk-app-control .mk-icon-btn:hover {
  transform: none;
}

.mk-app-control .mk-button:active:not(:disabled),
.mk-app-control .mk-icon-btn:active {
  transform: none;
}

.mk-app-control .mk-error {
  color: #7a271a;
  border-color: #f0b4ab;
  background: #fef3f2;
}

.mk-app-control .mk-success {
  color: #085d3a;
  border-color: #9bd4bb;
  background: #edfdf4;
}

.mk-app-control .mk-status-pill-up,
.mk-app-control .mk-status-pill-published {
  color: #085d3a;
  border-color: #9bd4bb;
  background: #edfdf4;
}

.mk-app-control .mk-status-pill-down,
.mk-app-control .mk-status-pill-archived {
  color: #7a271a;
  border-color: #f0b4ab;
  background: #fef3f2;
}

.mk-app-control .mk-status-pill-warn,
.mk-app-control .mk-status-pill-draft {
  color: #694100;
  border-color: #e8c879;
  background: #fff8e1;
}

.pm-admin-scrim {
  display: none;
}

.pm-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 7px;
  color: #ffffff;
  background: #17141b;
  transform: translateY(-160%);
}

.pm-skip-link:focus {
  transform: translateY(0);
}

.pm-auth-shell {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.pm-auth-header {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 12px clamp(20px, 4vw, 48px);
  color: #ffffff;
  background: var(--pm-sidebar);
}

.pm-auth-main {
  display: grid;
  align-items: center;
  width: 100%;
  max-width: 520px;
  padding: 32px 20px;
}

@media (max-width: 920px) {
  .pm-admin-shell {
    display: block;
  }

  .pm-admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(88vw, 320px);
    max-width: 320px;
    transform: translateX(-104%);
    transition: transform 200ms var(--mk-ease-enter);
  }

  .pm-admin-sidebar.is-open {
    transform: translateX(0);
  }

  .pm-sidebar-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    color: var(--pm-sidebar-muted);
    background: transparent;
    cursor: pointer;
  }

  .pm-sidebar-close:hover {
    color: #ffffff;
    background: var(--pm-sidebar-hover);
  }

  .pm-admin-mobile-header {
    position: sticky;
    top: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    align-items: center;
    min-height: 64px;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mk-border);
    background: rgba(255, 255, 255, 0.96);
  }

  .pm-mobile-menu-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mk-border);
    border-radius: 9px;
    color: var(--mk-text);
    background: var(--mk-bg-elev);
    cursor: pointer;
  }

  .pm-mobile-avatar {
    width: 36px;
    height: 36px;
  }

  .pm-site-context {
    padding-right: 16px;
    padding-left: 16px;
  }

  .pm-admin-main {
    padding: 20px 16px 88px;
  }

  .pm-admin-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(16, 13, 18, 0.58);
    cursor: default;
  }
}

@media (max-width: 600px) {
  .mk-app-control .mk-page-header-row,
  .mk-app-control .mk-card-head {
    align-items: stretch;
  }

  .mk-app-control .mk-page-header-row > .mk-button,
  .mk-app-control .mk-page-header-row > div:last-child {
    width: 100%;
  }

  .mk-app-control .mk-page-header-row > div:last-child .mk-button {
    flex: 1;
  }

  .mk-app-control .mk-table-wrap {
    margin-right: -16px;
    margin-left: -16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-admin-sidebar,
  .pm-skip-link {
    transition: none;
  }
}

/* Core workspace screens -------------------------------------------------- */

.pm-workspace-header h1 {
  margin: 3px 0 7px;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 30px;
  font-weight: 720;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pm-workspace-header .mk-page-subtitle {
  max-width: 68ch;
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.pm-workspace-context {
  margin: 0;
  color: var(--mk-color-red);
  font-size: 13px;
  font-weight: 650;
}

.pm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: var(--mk-text-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.pm-back-link:hover {
  color: var(--mk-color-red);
}

.pm-collection-summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--mk-text-muted);
  font-size: 13px;
}

.pm-collection-summary strong {
  color: var(--mk-text);
  font-size: 17px;
}

.pm-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 16px;
}

.pm-site-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
  padding: 20px;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
}

.pm-site-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pm-site-monogram {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--mk-color-red);
  background: var(--pm-accent-soft);
  font-size: 18px;
  font-weight: 750;
}

.pm-site-card-copy {
  min-width: 0;
  padding: 22px 0 16px;
}

.pm-site-card-copy h2 {
  margin: 0 0 5px;
  overflow-wrap: anywhere;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 19px;
  line-height: 1.3;
}

.pm-site-card-copy code {
  color: var(--mk-text-muted);
  font-family: var(--mk-font-mono);
  font-size: 12px;
}

.pm-site-meta {
  display: grid;
  gap: 9px;
  margin: 0 0 20px;
}

.pm-site-meta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mk-border);
}

.pm-site-meta dt,
.pm-site-meta dd {
  margin: 0;
  font-size: 12px;
}

.pm-site-meta dt {
  color: var(--mk-text-muted);
}

.pm-site-meta dd {
  overflow: hidden;
  color: var(--mk-text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-site-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.pm-site-card-actions .mk-button:first-child {
  flex: 1;
}

.pm-empty-state {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: clamp(36px, 7vw, 72px) 20px;
  border: 1px dashed var(--mk-border);
  border-radius: 12px;
  color: var(--mk-text-muted);
  background: var(--mk-surface);
  text-align: center;
}

.pm-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 11px;
  color: var(--mk-color-red);
  background: var(--pm-accent-soft);
}

.pm-empty-state h2 {
  margin: 0 0 7px;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 18px;
}

.pm-empty-state p {
  max-width: 52ch;
  margin: 0 0 18px;
}

.pm-skeleton-card {
  gap: 16px;
}

.pm-skeleton-card span,
.pm-table-skeleton span,
.mk-page-preview-skeleton span {
  display: block;
  border-radius: 7px;
  background: linear-gradient(90deg, #ece9ee 20%, #f7f6f8 45%, #ece9ee 70%);
  background-size: 220% 100%;
  animation: pm-skeleton 1.4s linear infinite;
}

.pm-skeleton-card span:nth-child(1) {
  width: 44px;
  height: 44px;
}

.pm-skeleton-card span:nth-child(2) {
  width: 70%;
  height: 22px;
}

.pm-skeleton-card span:nth-child(3) {
  width: 100%;
  height: 80px;
}

@keyframes pm-skeleton {
  to {
    background-position: -220% 0;
  }
}

.pm-data-panel {
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
}

.pm-data-panel .mk-table th,
.pm-data-panel .mk-table td {
  padding: 13px 14px;
}

.pm-data-panel .mk-table th {
  color: var(--mk-text-muted);
  background: var(--mk-bg-elev);
  font-size: 12px;
}

.pm-data-panel .mk-table tbody tr:last-child td {
  border-bottom: 0;
}

.pm-table-title-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--mk-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  text-align: left;
}

.pm-table-title-button:hover {
  color: var(--mk-color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pm-state-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.pm-state-button.is-on {
  color: #085d3a;
  border-color: #9bd4bb;
  background: #edfdf4;
}

.pm-state-button.is-off {
  color: var(--mk-text-muted);
  background: var(--mk-bg-elev-2);
}

.pm-state-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.pm-order-number {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  color: var(--mk-text-muted);
  font-family: var(--mk-font-mono);
  font-size: 11px;
}

.pm-danger-icon {
  color: var(--mk-danger) !important;
}

.pm-table-skeleton {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-border);
}

.pm-table-skeleton span {
  height: 62px;
  border-radius: 0;
}

.pm-inline-form {
  margin: 0 0 24px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
}

.pm-inline-form-head {
  margin-bottom: 20px;
}

.pm-inline-form-head h2 {
  margin: 0 0 4px;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 19px;
}

.pm-inline-form-head p {
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 13px;
}

.pm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pm-field {
  min-width: 0;
}

.pm-field small {
  display: block;
  margin-top: 5px;
  color: var(--mk-text-muted);
  font-size: 12px;
}

.pm-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

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

@media (max-width: 760px) {
  .pm-workspace-header .mk-page-header-row {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-workspace-header h1 {
    font-size: 25px;
  }

  .pm-header-actions,
  .pm-header-actions .mk-button {
    width: 100%;
  }

  .pm-site-grid {
    grid-template-columns: 1fr;
  }

  .pm-site-card {
    min-height: 0;
  }

  .pm-responsive-table,
  .pm-responsive-table tbody,
  .pm-responsive-table tr,
  .pm-responsive-table td {
    display: block;
    width: 100%;
  }

  .pm-responsive-table thead {
    display: none;
  }

  .pm-responsive-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .pm-responsive-table tr {
    overflow: hidden;
    border: 1px solid var(--mk-border);
    border-radius: 10px;
    background: var(--mk-surface);
  }

  .pm-data-panel .pm-responsive-table td {
    display: grid;
    grid-template-columns: minmax(90px, 0.38fr) minmax(0, 0.62fr);
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
    overflow-wrap: anywhere;
  }

  .pm-responsive-table td::before {
    content: attr(data-label);
    color: var(--mk-text-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .pm-responsive-table .mk-actions-inline {
    flex-wrap: wrap;
    white-space: normal;
  }

  .pm-responsive-table .mk-page-title-cell.is-child {
    padding-left: 0;
  }

  .pm-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pm-form-actions {
    flex-direction: column;
  }

  .pm-form-actions .mk-button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .pm-site-card-actions {
    flex-direction: column;
  }

  .pm-data-panel .pm-responsive-table td {
    display: block;
  }

  .pm-responsive-table td::before {
    display: block;
    margin-bottom: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-skeleton-card span,
  .pm-table-skeleton span {
    animation: none;
  }
}

/* Media workspace --------------------------------------------------------- */

.mk-app-control .mk-button-danger,
.mk-modal-backdrop .mk-button-danger {
  color: #a61b12;
  border-color: #e9a59e;
  background: #fff7f6;
}

.mk-app-control .mk-button-danger:hover:not(:disabled),
.mk-modal-backdrop .mk-button-danger:hover:not(:disabled) {
  color: #ffffff;
  border-color: #a61b12;
  background: #a61b12;
}

.pm-media-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px) minmax(160px, 210px);
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-media-search {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  color: var(--mk-text-muted);
  background: var(--mk-bg-elev);
}

.pm-media-search:focus-within {
  border-color: var(--mk-focus);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.13);
}

.pm-media-search input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--mk-text);
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.pm-media-folder-field,
.pm-media-sort-field {
  display: grid;
  gap: 5px;
}

.pm-media-folder-field > span,
.pm-media-sort-field > span {
  color: var(--mk-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.pm-media-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.pm-media-workspace.has-inspector {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
}

.pm-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
  gap: 12px;
}

.pm-media-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  color: var(--mk-text);
  background: var(--mk-surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color var(--mk-duration-fast) var(--mk-ease-standard),
    box-shadow var(--mk-duration-fast) var(--mk-ease-standard);
}

.pm-media-card:hover {
  border-color: #b9b3bf;
  box-shadow: 0 8px 22px rgba(36, 28, 40, 0.08);
}

.pm-media-card.is-selected {
  border-color: var(--mk-color-red);
  box-shadow: 0 0 0 2px rgba(184, 0, 105, 0.13);
}

.pm-media-card:focus-visible {
  outline: 3px solid var(--mk-focus);
  outline-offset: 2px;
}

.pm-media-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: #5a626e;
  background: #efedf1;
}

.pm-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-media-card-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 11px 12px;
}

.pm-media-card-copy strong,
.pm-media-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-media-card-copy strong {
  font-size: 12px;
  font-weight: 650;
}

.pm-media-card-copy small {
  color: var(--mk-text-muted);
  font-size: 11px;
}

.pm-media-skeleton {
  min-height: 190px;
  cursor: default;
}

.pm-media-skeleton span:first-child {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(90deg, #ece9ee 20%, #f7f6f8 45%, #ece9ee 70%);
  background-size: 220% 100%;
  animation: pm-skeleton 1.4s linear infinite;
}

.pm-media-skeleton span:last-child {
  width: 68%;
  height: 13px;
  margin: 12px;
  border-radius: 5px;
  background: #ece9ee;
}

.pm-media-inspector {
  position: sticky;
  top: 16px;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-media-inspector > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 10px;
  padding: 10px 12px 10px 15px;
  border-bottom: 1px solid var(--mk-border);
}

.pm-media-inspector > header div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.pm-media-inspector > header span {
  color: var(--mk-text-muted);
  font-size: 11px;
}

.pm-media-inspector > header strong {
  overflow: hidden;
  color: var(--mk-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-media-inspector-preview {
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 270px;
  overflow: hidden;
  color: #5a626e;
  background: #efedf1;
}

.pm-media-inspector-preview img {
  display: block;
  width: 100%;
  max-height: 270px;
  object-fit: contain;
}

.pm-media-inspector-meta {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 12px 15px 4px;
}

.pm-media-inspector-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mk-border);
}

.pm-media-inspector-meta dt,
.pm-media-inspector-meta dd {
  margin: 0;
  font-size: 11px;
}

.pm-media-inspector-meta dt {
  color: var(--mk-text-muted);
}

.pm-media-inspector-meta dd {
  overflow: hidden;
  color: var(--mk-text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-media-inspector .pm-field {
  display: grid;
  gap: 6px;
  padding: 13px 15px;
}

.pm-media-inspector .pm-field label {
  color: var(--mk-text);
  font-size: 12px;
  font-weight: 650;
}

.pm-media-inspector .pm-field small {
  color: var(--mk-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.pm-media-inspector-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 0 15px 15px;
}

@media (max-width: 1100px) {
  .pm-media-workspace.has-inspector {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  .pm-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}

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

  .pm-media-search {
    grid-column: 1 / -1;
  }

  .pm-media-workspace.has-inspector {
    display: block;
  }

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

  .pm-media-inspector {
    position: fixed;
    inset: 64px 0 0;
    z-index: 45;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: var(--mk-surface);
  }

  .pm-media-inspector > header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mk-surface);
  }

  .pm-media-inspector-preview,
  .pm-media-inspector-preview img {
    max-height: 42vh;
  }

  .pm-media-inspector-actions {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

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

  .pm-media-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-media-card,
  .pm-media-skeleton span:first-child {
    transition: none;
    animation: none;
  }
}

/* Shared picker portal ----------------------------------------------------- */

.pm-media-picker-portal {
  position: fixed;
  inset: 0;
  z-index: 80;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
}

.pm-media-picker-portal .mk-modal-backdrop {
  z-index: 80;
}

.pm-media-picker-portal .mk-media-folder,
.pm-media-picker-portal .mk-icon-btn,
.pm-media-picker-portal .mk-button {
  min-height: 44px;
}

.pm-media-picker-portal .mk-media-cell {
  min-height: 150px;
  color: var(--mk-text);
  background: var(--mk-surface);
}

.pm-media-picker-portal .mk-media-cell:focus-visible,
.pm-media-picker-portal .mk-media-folder:focus-visible {
  outline: 3px solid var(--mk-focus);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .pm-media-picker-portal .mk-modal-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .pm-media-picker-portal .mk-media-picker {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .pm-media-picker-portal .mk-modal-head,
  .pm-media-picker-portal .mk-modal-foot {
    flex: none;
  }

  .pm-media-picker-portal .mk-modal-foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .pm-media-picker-portal .mk-media-picker-body {
    flex-direction: column;
  }

  .pm-media-picker-portal .mk-media-picker-side {
    flex-direction: row;
    flex: none;
    width: 100%;
    padding: 7px 10px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--mk-border);
  }

  .pm-media-picker-portal .mk-media-folder {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pm-media-picker-portal .mk-media-picker-main {
    min-height: 0;
    padding: 10px;
  }

  .pm-media-picker-portal .mk-media-picker-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-media-picker-portal .mk-media-picker-toolbar .mk-button {
    justify-content: center;
    width: 100%;
  }

  .pm-media-picker-portal .mk-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .pm-media-picker-portal .mk-media-grid {
    grid-template-columns: 1fr;
  }
}

/* Settings ---------------------------------------------------------------- */

.pm-settings-section,
.pm-settings-diagnostics {
  max-width: 800px;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
}

.pm-settings-section {
  margin-bottom: 16px;
}

.pm-settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--mk-border);
}

.pm-settings-section-head h2 {
  margin: 0 0 4px;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 19px;
}

.pm-settings-section-head p {
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 13px;
}

.pm-settings-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--mk-color-red);
  font-size: 13px;
  font-weight: 750;
}

.pm-settings-list {
  display: grid;
  margin: 0;
  padding: 8px 20px;
}

.pm-settings-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 0.65fr);
  align-items: start;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mk-border);
}

.pm-settings-list > div:last-child {
  border-bottom: 0;
}

.pm-settings-list dt,
.pm-settings-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.pm-settings-list dt {
  color: var(--mk-text-muted);
}

.pm-settings-list dd {
  color: var(--mk-text);
}

.pm-settings-list code {
  white-space: normal;
}

.pm-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-role-list span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #5d1642;
  background: var(--pm-accent-soft);
  font-size: 11px;
  font-weight: 650;
  text-transform: capitalize;
}

.pm-settings-diagnostics summary {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 12px 20px;
  cursor: pointer;
}

.pm-settings-diagnostics summary span {
  display: grid;
  gap: 2px;
}

.pm-settings-diagnostics summary strong {
  color: var(--mk-text);
  font-size: 14px;
}

.pm-settings-diagnostics summary small {
  color: var(--mk-text-muted);
  font-size: 12px;
}

.pm-settings-diagnostics[open] summary {
  border-bottom: 1px solid var(--mk-border);
}

@media (max-width: 560px) {
  .pm-settings-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* Content collections ----------------------------------------------------- */

.pm-collection-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 220px);
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-collection-toolbar > .pm-field {
  display: grid;
  gap: 5px;
}

.pm-collection-toolbar > .pm-field > span {
  color: var(--mk-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.pm-blog-thumb {
  display: grid;
  place-items: center;
  width: 60px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 5px;
  color: var(--mk-text-muted);
  background: var(--mk-bg-elev-2);
  font-size: 9px;
  object-fit: cover;
}

.mk-app-control .mk-portfolio-studio {
  padding: 0;
  border: 0;
  background: transparent;
}

.mk-app-control .mk-portfolio-studio-head {
  color: var(--mk-text);
}

.mk-app-control .mk-portfolio-studio-head h2,
.mk-app-control .mk-portfolio-project-title h3,
.mk-app-control .mk-portfolio-lang-body h4 {
  color: var(--mk-text);
}

.mk-app-control .mk-portfolio-studio-head p,
.mk-app-control .mk-portfolio-project-title code,
.mk-app-control .mk-portfolio-project-meta,
.mk-app-control .mk-portfolio-lang-body p {
  color: var(--mk-text-muted);
}

.mk-app-control .mk-portfolio-count {
  color: #5d1642;
  border-color: #e6b5d0;
  background: var(--pm-accent-soft);
}

.mk-app-control .mk-portfolio-project-card,
.mk-app-control .mk-portfolio-language-card {
  border-color: var(--mk-border);
  background: var(--mk-surface);
  box-shadow: none;
}

.mk-app-control .mk-portfolio-project-card.is-open {
  border-color: #d892b8;
  box-shadow: 0 12px 28px rgba(64, 40, 58, 0.08);
}

.mk-app-control .mk-portfolio-project-summary:hover,
.mk-app-control .mk-portfolio-language-card:hover {
  background: #faf9fb;
}

.mk-app-control .mk-portfolio-thumb {
  border-color: var(--mk-border);
  background: var(--mk-bg-elev-2);
}

.mk-app-control .mk-portfolio-language-card.active {
  border-color: var(--mk-color-red);
  box-shadow: 0 0 0 2px rgba(184, 0, 105, 0.1);
}

.mk-app-control .mk-portfolio-manage-row,
.mk-app-control .mk-portfolio-project-editor {
  border-color: var(--mk-border);
  background: #faf9fb;
}

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

  .pm-data-panel .pm-responsive-table .mk-translation-group-row td[colspan] {
    display: block;
  }

  .mk-app-control .mk-portfolio-project-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .mk-app-control .mk-portfolio-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .mk-app-control .mk-portfolio-project-side {
    align-items: stretch;
  }

  .mk-app-control .mk-portfolio-language-grid {
    grid-template-columns: 1fr;
  }
}

/* Header settings --------------------------------------------------------- */

.pm-header-settings-card {
  max-width: 920px;
  margin-bottom: 14px;
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: none;
}

.pm-header-settings-card .mk-card-head {
  margin-bottom: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--mk-border);
  color: var(--mk-text);
  font-size: 16px;
  font-weight: 700;
}

.pm-header-settings-card input[type="radio"],
.pm-header-settings-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mk-color-red);
}

.pm-header-settings-card input[type="color"] {
  min-width: 44px !important;
  width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 2px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  background: var(--mk-surface);
}

.pm-header-preview-card {
  max-width: 1100px;
}

.pm-settings-savebar {
  position: sticky;
  bottom: 0;
  z-index: 18;
  display: flex;
  max-width: 920px;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--mk-border);
  border-radius: 11px 11px 0 0;
  background: var(--mk-surface);
  box-shadow: 0 -8px 24px rgba(35, 27, 38, 0.08);
}

@media (max-width: 600px) {
  .pm-header-settings-card {
    padding: 16px;
  }

  .pm-settings-savebar {
    bottom: 0;
    margin-right: -16px;
    margin-left: -16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .pm-settings-savebar .mk-button {
    flex: 1;
  }
}

/* Analytics --------------------------------------------------------------- */

.pm-period-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--mk-border);
  border-radius: 9px;
  background: var(--mk-bg-elev-2);
}

.pm-period-switch button {
  min-height: 38px;
  padding: 6px 11px;
  border: 0;
  border-radius: 6px;
  color: var(--mk-text-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.pm-period-switch button.is-active {
  color: var(--mk-text);
  background: var(--mk-surface);
  box-shadow: 0 1px 3px rgba(30, 22, 32, 0.1);
}

.pm-period-switch button:focus-visible {
  outline: 2px solid var(--mk-focus);
  outline-offset: 1px;
}

.pm-analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-analytics-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--mk-border);
}

.pm-analytics-metric:last-child {
  border-right: 0;
}

.pm-analytics-metric strong {
  color: var(--mk-text);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1;
  letter-spacing: -0.025em;
}

.pm-analytics-metric > span {
  color: var(--mk-text-muted);
  font-size: 12px;
}

.pm-analytics-skeleton span {
  display: block;
  border-radius: 5px;
  background: #ece9ee;
}

.pm-analytics-skeleton span:first-child {
  width: 50%;
  height: 28px;
}

.pm-analytics-skeleton span:last-child {
  width: 70%;
  height: 12px;
}

.pm-analytics-panel {
  min-width: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-analytics-panel > header {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--mk-border);
}

.pm-analytics-panel h2 {
  margin: 0 0 3px;
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 15px;
}

.pm-analytics-panel header p {
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 12px;
}

.pm-analytics-chart {
  display: flex;
  align-items: flex-end;
  min-height: 250px;
  gap: clamp(3px, 0.8vw, 9px);
  overflow-x: auto;
  padding: 24px 16px 12px;
}

.pm-analytics-bar {
  display: grid;
  grid-template-rows: 18px minmax(150px, 1fr) 18px;
  justify-items: center;
  flex: 1 0 18px;
  min-width: 18px;
  height: 220px;
}

.pm-analytics-bar span,
.pm-analytics-bar small {
  color: var(--mk-text-muted);
  font-size: 9px;
}

.pm-analytics-bar i {
  align-self: end;
  width: min(100%, 22px);
  min-height: 3px;
  border-radius: 4px 4px 1px 1px;
  background: var(--mk-color-red);
}

.pm-analytics-tables {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 16px;
}

/* Form submissions -------------------------------------------------------- */

.pm-submission-unread {
  background: #fff8fc;
}

.pm-submission-detail-row > td {
  padding: 0 !important;
  background: #faf9fb;
}

.pm-submission-detail {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.pm-submission-detail > p {
  max-width: 75ch;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--mk-text);
  line-height: 1.55;
}

.pm-submission-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-submission-detail-actions > span {
  margin-left: auto;
  font-size: 11px;
}

.pm-submission-reply {
  display: grid;
  gap: 8px;
  max-width: 720px;
}

.pm-submission-reply textarea {
  min-height: 120px;
}

@media (max-width: 900px) {
  .pm-analytics-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-analytics-metric:nth-child(2) {
    border-right: 0;
  }

  .pm-analytics-metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--mk-border);
  }

  .pm-analytics-tables {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .pm-period-switch {
    width: 100%;
  }

  .pm-submission-detail-row {
    display: table-row !important;
  }

  .pm-submission-detail-row > td {
    display: table-cell !important;
    width: 100%;
  }

  .pm-submission-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-submission-detail-actions > span {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .pm-analytics-summary {
    grid-template-columns: 1fr;
  }

  .pm-analytics-metric,
  .pm-analytics-metric:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--mk-border);
  }

  .pm-analytics-metric:last-child {
    border-bottom: 0;
  }
}

/* CRM --------------------------------------------------------------------- */

.pm-inbox-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.mk-app-control .mk-inbox {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.mk-app-control .mk-inbox-list {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--mk-border);
  background: #faf9fb;
}

.mk-app-control .mk-inbox-row {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--mk-border);
  border-radius: 0;
  color: var(--mk-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.mk-app-control .mk-inbox-row:hover {
  background: var(--mk-surface);
}

.mk-app-control .mk-inbox-row-sel {
  background: var(--pm-accent-soft);
}

.mk-app-control .mk-inbox-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--mk-focus);
  outline-offset: -3px;
}

.mk-app-control .mk-inbox-convo {
  min-width: 0;
  min-height: 0;
  background: var(--mk-surface);
}

.pm-inbox-conversation {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 620px;
}

.pm-inbox-conversation-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mk-border);
}

.pm-inbox-mobile-back {
  display: none;
}

.mk-app-control .mk-convo-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  background: #faf9fb;
}

.mk-app-control .mk-bubble {
  max-width: min(75%, 640px);
  border: 1px solid var(--mk-border);
  box-shadow: none;
}

.mk-app-control .mk-bubble-in {
  color: var(--mk-text);
  background: var(--mk-surface);
}

.mk-app-control .mk-bubble-out {
  color: #ffffff;
  border-color: var(--mk-color-red);
  background: var(--mk-color-red);
}

.pm-inbox-reply {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--mk-border);
  background: var(--mk-surface);
}

.pm-contact-profile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-contact-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--mk-color-red);
  font-size: 20px;
  font-weight: 750;
}

.pm-contact-profile dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 0;
}

.pm-contact-profile dl div {
  display: grid;
  gap: 2px;
}

.pm-contact-profile dt,
.pm-contact-profile dd {
  margin: 0;
  font-size: 12px;
}

.pm-contact-profile dt {
  color: var(--mk-text-muted);
}

.pm-contact-counts {
  display: flex;
  gap: 8px;
}

.pm-contact-counts span {
  display: grid;
  min-width: 92px;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--mk-border);
  border-radius: 9px;
  color: var(--mk-text-muted);
  font-size: 11px;
}

.pm-contact-counts strong {
  color: var(--mk-text);
  font-size: 20px;
}

.pm-contact-activity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pm-pipeline-create {
  margin-bottom: 16px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-pipeline-create summary {
  min-height: 64px;
  padding: 12px 16px;
  cursor: pointer;
}

.pm-pipeline-create summary span {
  display: grid;
  gap: 2px;
}

.pm-pipeline-create summary small {
  color: var(--mk-text-muted);
}

.pm-pipeline-create-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(120px, 0.45fr) auto;
  align-items: end;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--mk-border);
}

.pm-pipeline-create-form .pm-field {
  display: grid;
  gap: 5px;
}

.pm-pipeline-create-form .pm-field > span {
  color: var(--mk-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.pm-pipeline-board {
  display: grid;
  grid-auto-columns: minmax(270px, 320px);
  grid-auto-flow: column;
  align-items: start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}

.pm-pipeline-column {
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: #f3f1f4;
  scroll-snap-align: start;
}

.pm-pipeline-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-surface);
}

.pm-pipeline-column > header div {
  display: grid;
}

.pm-pipeline-column > header small,
.pm-pipeline-column > header span {
  color: var(--mk-text-muted);
  font-size: 11px;
}

.pm-pipeline-cards {
  display: grid;
  gap: 9px;
  min-height: 120px;
  padding: 10px;
}

.pm-deal-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--mk-border);
  border-radius: 9px;
  background: var(--mk-surface);
}

.pm-deal-card > div {
  display: grid;
  gap: 2px;
}

.pm-deal-card > div span,
.pm-deal-card > p {
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .pm-contact-profile {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .pm-contact-avatar {
    width: 54px;
    height: 54px;
  }

  .pm-contact-counts {
    grid-column: 1 / -1;
  }

  .pm-contact-activity {
    grid-template-columns: 1fr;
  }

  .pm-pipeline-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .mk-app-control .mk-inbox {
    display: block;
    min-height: 0;
  }

  .mk-app-control .mk-inbox-list {
    max-height: none;
    border-right: 0;
  }

  .mk-app-control .mk-inbox.has-selection .mk-inbox-list {
    display: none;
  }

  .mk-app-control .mk-inbox:not(.has-selection) .mk-inbox-convo {
    display: none;
  }

  .pm-inbox-conversation {
    min-height: calc(100dvh - 190px);
  }

  .pm-inbox-mobile-back {
    display: inline-flex;
    min-height: 40px;
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    color: var(--mk-color-red);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
  }

  .pm-contact-profile {
    grid-template-columns: 1fr;
  }

  .pm-contact-profile dl {
    grid-template-columns: 1fr;
  }

  .pm-contact-counts {
    grid-column: auto;
  }

  .pm-contact-counts span {
    flex: 1;
  }

  .pm-pipeline-create-form {
    grid-template-columns: 1fr;
  }
}

/* Technical site modules -------------------------------------------------- */

.pm-field-error {
  margin: 6px 0 0;
  color: #a61b12;
  font-size: 12px;
  font-weight: 600;
}

.mk-input.is-invalid {
  border-color: #c83a2d;
  box-shadow: 0 0 0 2px rgba(200, 58, 45, 0.12);
}

.pm-inline-form textarea {
  min-height: 180px;
  resize: vertical;
  font-family: var(--mk-font-mono);
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
}

.pm-data-panel code {
  overflow-wrap: anywhere;
  color: var(--mk-text);
  font-family: var(--mk-font-mono);
  font-size: 12px;
}

.pm-translation-import {
  box-shadow: none;
}

.pm-translation-import-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: end;
}

.pm-translation-import-copy h2 {
  color: var(--mk-text);
  font-family: var(--mk-font-sans);
  font-size: 17px;
  line-height: 1.35;
}

.pm-translation-import-copy p {
  max-width: 68ch;
}

.pm-translation-import-controls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 10px;
}

.pm-translation-import-controls .pm-field {
  display: grid;
  gap: 5px;
}

.pm-translation-import-preview {
  border-top: 1px solid var(--mk-border);
}

.pm-translation-import-actions,
.pm-translation-actions,
.pm-translation-save-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-translation-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 220px);
}

.pm-translation-table-panel {
  overflow: visible;
}

.pm-translation-table-panel .mk-table-wrap {
  max-height: min(70vh, 760px);
  overflow: auto;
}

.pm-translation-table-panel thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.pm-translation-table-panel th:first-child,
.pm-translation-table-panel td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--mk-surface);
}

.pm-translation-table-panel thead th:first-child {
  z-index: 3;
  background: #faf9fb;
}

.pm-translation-key {
  display: inline-block;
  max-width: 280px;
  overflow-wrap: anywhere;
  color: var(--mk-color-red) !important;
}

.pm-translation-value {
  min-width: 220px;
  background: var(--mk-surface);
}

.pm-translation-value.mk-input-edited {
  border-color: #c2749f;
  background: var(--pm-accent-soft);
}

.pm-translation-value-pending-refresh {
  border-color: #9bd4bb;
  background: #edfdf4;
}

.pm-translation-add-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (max-width: 760px) {
  .pm-translation-import-layout,
  .pm-translation-toolbar {
    grid-template-columns: 1fr;
  }

  .pm-translation-import-controls {
    grid-template-columns: 1fr;
  }

  .pm-translation-import-controls .mk-button,
  .pm-translation-import-actions .mk-button,
  .pm-translation-actions .mk-button,
  .pm-translation-save-actions .mk-button {
    width: 100%;
  }

  .pm-translation-table-panel .mk-table-wrap {
    max-height: none;
    overflow: visible;
  }

  .pm-translation-table-panel thead,
  .pm-translation-table-panel th:first-child,
  .pm-translation-table-panel td:first-child {
    position: static;
  }

  .pm-translation-table-panel .pm-responsive-table td {
    align-items: start;
  }

  .pm-translation-value {
    min-width: 0;
  }
}

/* Page Studio product layout ---------------------------------------------- */

.pm-studio-header {
  margin-bottom: 18px;
}

.pm-studio-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.pm-studio-title-row h1 {
  margin-bottom: 3px;
}

.pm-studio-statuses {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 4px;
}

.pm-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #9bd4bb;
  border-radius: 999px;
  color: #085d3a;
  background: #edfdf4;
  font-size: 11px;
  font-weight: 650;
}

.pm-save-state.is-dirty {
  color: #694100;
  border-color: #e8c879;
  background: #fff8e1;
}

.pm-studio-mobile-tabs {
  display: none;
}

.mk-app-control .mk-page-studio {
  width: 100%;
  max-width: none;
  margin-left: 0;
  transform: none;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(400px, 480px);
  gap: 14px;
  align-items: start;
}

/* Studio top bar --------------------------------------------------------- */
.mk-app-control .mk-studio-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--mk-surface) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--mk-shadow-1);
}
.mk-app-control .mk-studio-topbar-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mk-app-control .mk-studio-crumb {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mk-app-control .mk-studio-crumb strong {
  font-size: 15px;
  color: var(--mk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}
.mk-app-control .mk-studio-crumb code {
  font-size: 11px;
  color: var(--mk-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-app-control .mk-studio-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: var(--mk-bg-elev);
}
.mk-app-control .mk-studio-mode-switch button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mk-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--mk-duration-fast) var(--mk-ease-standard), color var(--mk-duration-fast);
}
.mk-app-control .mk-studio-mode-switch button.is-active {
  background: var(--mk-color-red);
  color: var(--mk-color-white);
  box-shadow: 0 8px 20px rgba(215, 38, 62, 0.28);
}
.mk-app-control .mk-studio-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mk-app-control .mk-status-pill-compact {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: capitalize;
}
.mk-app-control .mk-studio-menu { position: relative; }
.mk-app-control .mk-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: transparent;
  border: 0;
  cursor: default;
}
.mk-app-control .mk-studio-menu-popover,
.mk-app-control .mk-block-list-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 220px;
  max-width: 264px;
  padding: 6px;
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  background: var(--mk-bg-elev);
  box-shadow: var(--mk-shadow-2);
}
.mk-app-control .mk-block-list-popover { min-width: 196px; }
.mk-app-control .mk-studio-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--mk-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.mk-app-control .mk-studio-menu-item:hover:not(:disabled) { background: var(--mk-bg-elev-2); }
.mk-app-control .mk-studio-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.mk-app-control .mk-studio-menu-danger { color: var(--mk-danger); }
.mk-app-control .mk-studio-menu-sep {
  display: block;
  height: 1px;
  margin: 6px 4px;
  background: var(--mk-border);
}
.mk-app-control .mk-studio-menu-label {
  display: block;
  padding: 6px 10px 2px;
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Blocks panel (left) ---------------------------------------------------- */
.mk-app-control .mk-page-blocks-panel {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  max-height: calc(100vh - 88px);
  padding: 12px;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
  overflow: auto;
}
.mk-app-control .mk-page-blocks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mk-app-control .mk-page-blocks-head strong {
  font-size: 13px;
  color: var(--mk-text);
  letter-spacing: 0.02em;
}
.mk-app-control .mk-page-blocks-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-app-control .mk-page-blocks-search input,
.mk-app-control .mk-page-blocks-filter select { width: 100%; }
.mk-app-control .mk-page-block-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.mk-app-control .mk-page-blocks-meta {
  margin: 0 0 2px;
  color: var(--mk-text-muted);
  font-size: 11px;
}
.mk-app-control .mk-page-blocks-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px;
  border: 1px dashed var(--mk-border);
  border-radius: 10px;
  text-align: center;
}
.mk-app-control .mk-page-blocks-empty strong { color: var(--mk-text); font-size: 13px; }
.mk-app-control .mk-page-blocks-empty small { color: var(--mk-text-muted); font-size: 12px; }

.mk-app-control .mk-block-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 4px;
  border: 1px solid var(--mk-border);
  border-radius: 9px;
  background: var(--mk-bg-elev);
  cursor: grab;
  transition: border-color var(--mk-duration-fast), box-shadow var(--mk-duration-fast);
}
.mk-app-control .mk-block-list-item:hover {
  border-color: color-mix(in srgb, var(--mk-color-red) 45%, var(--mk-border));
}
.mk-app-control .mk-block-list-item.is-selected {
  border-color: var(--mk-color-red);
  box-shadow: 0 0 0 1px var(--mk-color-red), 0 10px 24px rgba(215, 38, 62, 0.16);
  background: color-mix(in srgb, var(--mk-color-red) 8%, var(--mk-bg-elev));
}
.mk-app-control .mk-block-list-item.is-dragging {
  opacity: 0.5;
  border-style: dashed;
}
.mk-app-control .mk-block-list-item:active { cursor: grabbing; }
.mk-app-control .mk-block-list-grip {
  flex: 0 0 auto;
  width: 16px;
  color: var(--mk-text-muted);
  text-align: center;
  font-size: 13px;
  cursor: grab;
  user-select: none;
}
.mk-app-control .mk-block-type-icon {
  flex: 0 0 auto;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--mk-bg-elev-2);
  color: var(--mk-danger);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mk-app-control .mk-block-list-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.mk-app-control .mk-block-list-main strong {
  color: var(--mk-text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-app-control .mk-block-list-main small {
  display: flex;
  align-items: center;
  color: var(--mk-text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-app-control .mk-block-list-sep { color: var(--mk-border); }
.mk-app-control .mk-block-list-tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--mk-bg-elev-2);
  color: var(--mk-text-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.mk-app-control .mk-block-list-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-color-warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-color-warn) 25%, transparent);
}
.mk-app-control .mk-block-list-menu { position: relative; flex: 0 0 auto; }

/* Block clipboard chip (copied block, paste-anywhere) ------------------- */
.mk-app-control .mk-block-clipboard-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--mk-accent, #6b7bff) 35%, var(--mk-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--mk-accent, #6b7bff) 8%, var(--mk-surface));
}
.mk-app-control .mk-block-clipboard-chip .mk-block-type-icon { font-size: 14px; }
.mk-app-control .mk-block-clipboard-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.mk-app-control .mk-block-clipboard-label small {
  color: var(--mk-text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-app-control .mk-block-clipboard-label strong {
  color: var(--mk-text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-app-control .mk-block-clipboard-chip .mk-button-sm { margin-left: auto; }

/* Editor panel (right) --------------------------------------------------- */
.mk-app-control .mk-page-editor-panel {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: calc(100vh - 88px);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
  overflow: hidden;
}
.mk-app-control .mk-page-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-bg-elev);
}
.mk-app-control .mk-page-editor-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mk-app-control .mk-page-editor-title strong { color: var(--mk-text); font-size: 15px; }
.mk-app-control .mk-page-editor-title small { color: var(--mk-text-muted); font-size: 11px; }
.mk-app-control .mk-page-editor-dirty {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff8e1;
  border: 1px solid #e8c879;
  color: #694100;
  font-size: 11px;
  font-weight: 700;
}
.mk-app-control .mk-page-editor-body {
  flex: 1 1 auto;
  overflow: auto;
}
.mk-app-control .mk-page-editor-body .mk-block-editor {
  border-top: 0;
  background: transparent;
}
.mk-app-control .mk-page-editor-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--mk-text-muted);
}
.mk-app-control .mk-page-editor-empty strong { color: var(--mk-text); font-size: 15px; }
.mk-app-control .mk-page-editor-empty small { font-size: 12px; line-height: 1.5; }

/* Workspace modes -------------------------------------------------------- */
.mk-app-control .mk-page-studio.is-mode-preview {
  grid-template-columns: 1fr;
}
.mk-app-control .mk-page-studio.is-mode-preview .mk-page-blocks-panel,
.mk-app-control .mk-page-studio.is-mode-preview .mk-page-editor-panel { display: none; }
.mk-app-control .mk-page-studio.is-mode-structure {
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
}
.mk-app-control .mk-page-studio.is-mode-structure .mk-page-editor-panel { display: none; }

/* Preview toolbar clears the sticky top bar */
.mk-app-control .mk-page-preview-toolbar { top: 72px; }
.mk-app-control .mk-page-preview-scale-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: var(--mk-bg-elev);
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 700;
}

/* Initial-load skeleton: mirrors the 3-column studio grid (blocks list,
   preview, block editor) so the layout doesn't pop in once the page loads.
   Reuses the app-wide .pm-table-skeleton shimmer rows for visual consistency
   with every other list/detail screen's loading state. */
.mk-app-control .mk-page-studio-loading .mk-page-blocks-panel,
.mk-app-control .mk-page-studio-loading .mk-page-editor-panel {
  padding: var(--mk-space-3);
}
.mk-app-control .mk-page-studio-loading .mk-page-live-preview {
  display: flex;
  padding: var(--mk-space-3);
}
.mk-app-control .mk-page-preview-skeleton {
  flex: 1 1 auto;
  min-height: 420px;
}
.mk-app-control .mk-page-preview-skeleton span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--mk-radius-md);
}

/* Dockable workspace: resizable, collapsible, pop-out-able panels -------- */

/* Below the narrow-workspace breakpoint only one panel is ever mounted (see
   the Rust `if !is_narrow || current_narrow_panel == ...` guards), so a
   single flexible column is all the grid needs. */
.mk-app-control .mk-page-studio.is-narrow-workspace {
  grid-template-columns: 1fr;
}

/* Vertical drag handle between two panels. A wide (10px) hit target keeps a
   1-2px visible seam so it doesn't read as a stray divider, but is still easy
   to grab; the visible line brightens on hover so its purpose is obvious
   before the user commits to a drag. */
.mk-app-control .mk-workspace-resizer {
  position: relative;
  align-self: stretch;
  width: 10px;
  cursor: col-resize;
  background: transparent;
}
.mk-app-control .mk-workspace-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--mk-border);
  transition: background-color var(--mk-duration-fast) var(--mk-ease-standard),
    width var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-app-control .mk-workspace-resizer:hover::after {
  width: 3px;
  background: var(--mk-color-red);
}
/* Keyboard users get the same bright affordance the mouse hover shows, plus a
   focus ring, so the separator is operable without a pointer (WAI-ARIA
   `separator` pattern). */
.mk-app-control .mk-workspace-resizer:focus-visible {
  outline: none;
}
.mk-app-control .mk-workspace-resizer:focus-visible::after {
  width: 3px;
  background: var(--mk-color-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-color-red) 30%, transparent);
}
/* Keyboard focus (role="separator", tabindex="0"): same affordance as hover so
   keyboard users see which handle is active while arrow-resizing. */
.mk-app-control .mk-workspace-resizer:focus {
  outline: none;
}
.mk-app-control .mk-workspace-resizer:focus-visible::after {
  width: 3px;
  background: var(--mk-color-red);
  box-shadow: 0 0 0 3px rgba(202, 2, 116, 0.35);
}
/* While dragging: lock the resize cursor and suppress text selection
   everywhere (not just over the handle), and stop iframes from swallowing
   mousemove so the drag never gets "stuck" over the preview. */
body.mk-workspace-resizing,
body.mk-workspace-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
body.mk-workspace-resizing iframe {
  pointer-events: none;
}

/* Per-panel header strip: label + collapse / pop-out controls. Sits above
   each panel's own existing head (block count, preview toolbar, etc.). */
.mk-app-control .mk-panel-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-bg-elev-2);
}
.mk-app-control .mk-panel-chrome-label {
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-app-control .mk-panel-chrome-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mk-app-control .mk-panel-chrome-actions .mk-icon-btn {
  width: 26px;
  height: 26px;
  font-size: 13px;
}
.mk-app-control .mk-page-live-preview .mk-panel-chrome {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: #282333;
}
.mk-app-control .mk-page-live-preview .mk-panel-chrome-label {
  color: rgba(255, 255, 255, 0.6);
}

/* Collapsed panel: a narrow vertical dock-tab rather than nothing, so the
   panel's disappearance always reads as "tucked away", never as a bug. */
.mk-app-control .mk-panel-dock-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 36px;
  align-self: stretch;
  padding: 12px 0;
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  background: var(--mk-bg-elev);
  color: var(--mk-text-muted);
  cursor: pointer;
  transition: background-color var(--mk-duration-fast) var(--mk-ease-standard),
    color var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-app-control .mk-panel-dock-tab:hover {
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
}
.mk-app-control .mk-panel-dock-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Collapsed Live Preview: a single compact "Show preview" affordance rather
   than a full-height dock-tab, since the preview is the workspace's largest,
   most central panel. */
.mk-app-control .mk-panel-collapsed-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 24px;
  border: 1px dashed var(--mk-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* Popped-out placeholder: explains where the panel went instead of just
   leaving an unexplained gap. */
.mk-app-control .mk-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  padding: 32px 20px;
  border: 1px dashed var(--mk-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.mk-app-control .mk-panel-placeholder strong {
  color: var(--mk-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.mk-app-control .mk-panel-placeholder p {
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 12px;
}
.mk-app-control .mk-panel-placeholder-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Pop-out panel window: no admin chrome, just a compact header + the panel
   body. See `Shell::shell`'s `Route::PagePanel` branch and `PagePanelWindow`. */
.mk-panel-window-main {
  padding: 0;
  max-width: none;
}
.mk-panel-window-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.mk-panel-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-bg-elev);
}
.mk-panel-window-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mk-panel-window-title strong {
  color: var(--mk-text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-panel-window-title small {
  color: var(--mk-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-panel-window-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mk-panel-window-body {
  flex: 1 1 auto;
  overflow: auto;
}
.mk-panel-window-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: var(--mk-text-muted);
  font-size: 13px;
}
/* Main workspace tab gone / unreachable. Shown instead of the editable panel
   so a disconnected pop-out can't silently swallow edits. */
.mk-panel-window-disconnected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 32px 24px;
  border-top: 1px solid var(--mk-border);
  background: color-mix(in srgb, var(--mk-danger) 5%, var(--mk-surface));
  text-align: center;
}
.mk-panel-window-disconnected strong {
  color: var(--mk-danger);
  font-size: 15px;
}
.mk-panel-window-disconnected p {
  max-width: 46ch;
  margin: 0;
  color: var(--mk-text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.mk-panel-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.mk-panel-blocks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mk-panel-blocks-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.mk-panel-blocks-row-actions .mk-icon-btn {
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.mk-panel-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mk-panel-preview-stage {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px;
  background: #050816;
}
.mk-panel-preview-stage iframe {
  display: block;
  height: 100%;
  min-height: 70vh;
  margin-inline: auto;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  background: #fff;
}
.mk-panel-editor-body {
  height: 100%;
}

/* Drawers ---------------------------------------------------------------- */
.mk-app-control .mk-studio-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}
.mk-app-control .mk-studio-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, 0.55);
  backdrop-filter: blur(2px);
  border: 0;
  cursor: default;
}
.mk-app-control .mk-studio-drawer-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(440px, 92vw);
  max-height: 100vh;
  margin-left: auto;
  border-left: 1px solid var(--mk-border);
  background: var(--mk-surface);
  box-shadow: var(--mk-shadow-2);
  overflow: hidden;
}
.mk-app-control .mk-studio-drawer-panel-wide { width: min(560px, 94vw); }
.mk-app-control .mk-studio-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-bg-elev);
}
.mk-app-control .mk-studio-drawer-head strong { color: var(--mk-text); font-size: 15px; }
.mk-app-control .mk-studio-drawer-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 16px;
}

.mk-app-control .mk-page-control-panel,
.mk-app-control .mk-page-history-panel {
  top: 16px;
  max-height: calc(100vh - 32px);
}

.mk-app-control .mk-page-control-card,
.mk-app-control .mk-page-history-panel {
  border-color: var(--mk-border);
  background: var(--mk-surface);
  box-shadow: none;
}

.mk-app-control .mk-page-control-card .mk-card-head {
  color: var(--mk-text);
  font-size: 13px;
  font-weight: 680;
}

.mk-app-control .mk-page-control-card > .mk-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mk-app-control .mk-page-control-card > .mk-actions-row .mk-button {
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 1.25;
}

.mk-app-control .mk-page-block-row {
  border-color: var(--mk-border);
  background: var(--mk-surface);
}

.mk-app-control .mk-page-block-row.is-editing {
  border-color: color-mix(in srgb, var(--mk-color-red) 62%, var(--mk-border));
  box-shadow: 0 10px 28px rgba(56, 32, 48, 0.1);
}

.mk-app-control .mk-page-block-row .mk-block-editor {
  border-top-color: var(--mk-border);
  background: #faf9fb;
}

.mk-app-control .mk-page-block-row-actions {
  max-width: 190px;
}

.mk-app-control .mk-page-live-preview {
  border-color: #282333;
  box-shadow: none;
}

.mk-app-control .mk-page-browser-preview {
  display: block;
  min-height: calc(var(--scaled-h) + 32px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px;
}

.mk-app-control .mk-page-preview-scale {
  position: relative;
  width: var(--scaled-w);
  height: var(--scaled-h);
  margin-inline: auto;
  overflow: hidden;
  flex: none;
}

.mk-app-control .mk-page-browser-preview iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: var(--frame-w);
  height: var(--frame-h);
  transform: scale(var(--frame-scale));
  transform-origin: top left;
}

.mk-app-control .mk-page-history-step strong {
  font-size: 12px;
}

.mk-app-control .mk-page-history-step small,
.mk-app-control .mk-page-history-empty small,
.mk-app-control .mk-page-history-hint {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.mk-app-control .mk-input.is-invalid {
  border-color: var(--mk-danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.pm-field-error {
  margin: 6px 0 0;
  color: var(--mk-danger);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1380px) {
  .mk-app-control .mk-page-studio {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(360px, 420px);
  }
}

@media (max-width: 920px) {
  .mk-app-control .mk-studio-topbar {
    padding: 8px 10px;
    gap: 8px;
  }

  .mk-app-control .mk-studio-crumb strong {
    max-width: 46vw;
  }

  .mk-app-control .mk-studio-mode-switch {
    order: 3;
    width: 100%;
  }

  .mk-app-control .mk-studio-mode-switch button {
    flex: 1;
    min-height: 42px;
  }

  .mk-app-control .mk-studio-menu-popover {
    right: auto;
    left: 0;
  }

  .mk-app-control .mk-page-studio {
    display: block;
    width: 100%;
  }

  .mk-app-control .mk-page-studio > .mk-page-blocks-panel,
  .mk-app-control .mk-page-studio > .mk-page-live-preview,
  .mk-app-control .mk-page-studio > .mk-page-editor-panel {
    display: none;
    position: relative;
    top: auto;
    max-height: none;
  }

  .mk-app-control .mk-page-studio.is-mode-structure .mk-page-blocks-panel {
    display: flex;
  }

  .mk-app-control .mk-page-studio.is-mode-preview .mk-page-live-preview {
    display: flex;
    flex-direction: column;
  }

  .mk-app-control .mk-page-studio.is-mode-edit .mk-page-editor-panel {
    display: flex;
  }

  .mk-app-control .mk-page-browser-preview {
    overflow: auto;
  }
}

@media (max-width: 600px) {
  .mk-app-control .mk-studio-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-app-control .mk-studio-topbar-actions {
    justify-content: space-between;
  }

  .mk-app-control .mk-page-preview-toolbar {
    align-items: stretch;
  }

  .mk-app-control .mk-portfolio-device-switch {
    order: 3;
    width: 100%;
  }

  .mk-app-control .mk-portfolio-device-switch button {
    flex: 1;
    min-height: 42px;
  }

  .mk-app-control .mk-block-list-popover,
  .mk-app-control .mk-studio-menu-popover {
    right: 0;
    left: auto;
    min-width: 180px;
  }

  .mk-app-control .mk-page-browser-preview {
    padding: 10px;
  }
}

/* Canvas editor studio ----------------------------------------------------- */

.mk-app-control .pm-canvas-shell {
  display: flex;
  min-height: calc(100vh - 56px);
  background: #0f0f1a;
  color: #e8e8e8;
}

.mk-app-control .pm-canvas-toolbar {
  display: flex;
  flex: 0 0 286px;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  background: #141428;
  border-right: 1px solid #1e1e3a;
}

.mk-app-control .pm-canvas-toolbar-title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.mk-app-control .pm-canvas-stage {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.mk-app-control .pm-canvas-stage-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 16px;
  background: #141428;
  border-bottom: 1px solid #1e1e3a;
}

.mk-app-control .pm-canvas-stage-bar-title {
  margin: 0 0 8px;
  color: var(--mk-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.mk-app-control .pm-canvas-blocks {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.mk-app-control .pm-canvas-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.mk-app-control .pm-canvas-board {
  overflow: hidden;
  border: 1px solid #1e1e3a;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.mk-app-control .pm-canvas-panel {
  display: flex;
  flex: 0 0 320px;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  background: #141428;
  border-left: 1px solid #1e1e3a;
}

.mk-app-control .pm-canvas-panel-subtitle {
  color: var(--mk-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.mk-app-control .pm-canvas-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2f4e;
}

.mk-app-control .pm-canvas-panel-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.mk-app-control .pm-canvas-panel-code {
  color: var(--mk-text-muted);
  font-size: 10px;
}

.mk-app-control .pm-canvas-panel-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.mk-app-control .pm-canvas-panel-actions .mk-button {
  flex: 1;
}

.mk-app-control .pm-canvas-zoom-wrap {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

.mk-app-control .pm-canvas-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  pointer-events: auto;
  background: #141428;
  border: 1px solid #2a2f4e;
}

.mk-app-control .pm-canvas-zoom-value {
  min-width: 54px;
  text-align: center;
  color: #d8d8e8;
  font-size: 12px;
  font-weight: 800;
}

.mk-app-control .pm-canvas-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.76);
}

.mk-app-control .pm-canvas-preview-frame {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #090b18;
  border: 1px solid #2a2f4e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.mk-app-control .pm-canvas-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 16px;
  background: #101426;
  border-bottom: 1px solid #20253d;
}

.mk-app-control .pm-canvas-preview-title {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.mk-app-control .pm-canvas-preview-sub {
  display: block;
  color: var(--mk-text-muted);
  font-size: 12px;
}

.mk-app-control .pm-canvas-preview-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mk-app-control .pm-canvas-preview-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
  background: #000415;
}

@media (max-width: 900px) {
  .mk-app-control .pm-canvas-shell {
    flex-direction: column;
    min-height: 0;
  }

  .mk-app-control .pm-canvas-toolbar,
  .mk-app-control .pm-canvas-panel {
    flex: none;
    max-height: 280px;
  }

  .mk-app-control .pm-canvas-zoom-wrap {
    top: 12px;
    right: 12px;
  }
}

@media (max-width: 560px) {
  .mk-app-control .pm-canvas-stage-bar {
    align-items: stretch;
  }

  .mk-app-control .pm-canvas-blocks {
    width: 100%;
    margin-top: 8px;
  }

  .mk-app-control .pm-canvas-preview {
    padding: 0;
  }

  .mk-app-control .pm-canvas-preview-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .mk-app-control .pm-canvas-preview-tools {
    width: 100%;
  }

  .mk-app-control .pm-canvas-preview-tools .mk-button {
    flex: 1;
  }
}

/* Video sessions ----------------------------------------------------------- */

.mk-app-control .pm-video-result {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-bg-elev-2);
}

.mk-app-control .pm-video-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mk-app-control .pm-video-result-message {
  margin: 0 0 10px;
  color: var(--mk-text-muted);
  font-size: 13px;
}

.mk-app-control .pm-video-result-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
}

.mk-app-control .pm-video-result-meta > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mk-app-control .pm-video-result-meta dt {
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.mk-app-control .pm-video-result-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.mk-app-control .pm-video-result-meta code {
  overflow-wrap: anywhere;
  font-family: var(--mk-font-mono);
  font-size: 11px;
  color: var(--mk-text);
}

.mk-app-control .pm-cell-clip {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* System overview ---------------------------------------------------------- */

.mk-app-control .pm-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.mk-app-control .pm-overview-health-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
}

.mk-app-control .pm-overview-health-label {
  color: var(--mk-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.mk-app-control .pm-overview-health-pill {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
}

.mk-app-control .pm-overview-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mk-border);
}

.mk-app-control .pm-overview-panel-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mk-text);
}

.mk-app-control .pm-empty-inline {
  margin: 0;
  padding: 20px 16px;
  color: var(--mk-text-muted);
  font-size: 13px;
}

.mk-app-control .pm-overview-events {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--mk-border);
}

.mk-app-control .pm-overview-event {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  background: var(--mk-surface);
}

.mk-app-control .pm-overview-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mk-app-control .pm-overview-event-level {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mk-app-control .pm-overview-event-time {
  color: var(--mk-text-muted);
  font-family: var(--mk-font-mono);
  font-size: 11px;
}

.mk-app-control .pm-overview-event-message {
  margin: 0;
  color: var(--mk-text);
  font-size: 13px;
  line-height: 1.5;
}

.mk-app-control .pm-event-error .pm-overview-event-level { color: var(--mk-danger); }
.mk-app-control .pm-event-warn .pm-overview-event-level { color: var(--mk-color-warn); }
.mk-app-control .pm-event-info .pm-overview-event-level { color: var(--mk-color-red); }
.mk-app-control .pm-event-muted .pm-overview-event-level { color: var(--mk-text-muted); }

/* Browser workspace -------------------------------------------------------- */

.mk-app-control .pm-browser-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.mk-app-control .pm-browser-info-card {
  padding: 18px;
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  background: var(--mk-surface);
}

.mk-app-control .pm-browser-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.mk-app-control .pm-browser-info-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mk-text);
}

.mk-app-control .pm-browser-info-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.mk-app-control .pm-browser-info-card dl > div {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mk-border);
}

.mk-app-control .pm-browser-info-card dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mk-app-control .pm-browser-info-card dt {
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.mk-app-control .pm-browser-info-card dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mk-app-control .pm-browser-info-card code {
  font-family: var(--mk-font-mono);
  font-size: 12px;
  color: var(--mk-text);
}

.mk-app-control .pm-browser-frame {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}

@media (max-width: 760px) {
  .mk-app-control .pm-browser-frame {
    height: 420px;
  }
}

/* Login -------------------------------------------------------------------- */

.mk-app-control .pm-login-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 56px);
  padding: clamp(24px, 6vw, 64px) 16px;
}

.mk-app-control .pm-login-card {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 400px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--mk-border);
  border-radius: 14px;
  background: var(--mk-surface);
  box-shadow: var(--mk-shadow-2);
}

.mk-app-control .pm-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mk-app-control .pm-login-logo {
  width: 44px;
  height: auto;
}

.mk-app-control .pm-login-title {
  display: block;
  font-family: var(--mk-font-serif);
  font-size: 18px;
  color: var(--mk-text);
}

.mk-app-control .pm-login-sub {
  display: block;
  color: var(--mk-text-muted);
  font-size: 12px;
}

.mk-app-control .pm-login-form {
  display: grid;
  gap: 16px;
}

.mk-app-control .pm-login-submit {
  min-height: 44px;
  width: 100%;
}

/* Not found ---------------------------------------------------------------- */

.mk-app-control .pm-not-found {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 56px);
  padding: 32px 16px;
  text-align: center;
}

.mk-app-control .pm-not-found-inner {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 460px;
}

.mk-app-control .pm-not-found-code {
  margin: 0;
  font-size: clamp(64px, 16vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: var(--mk-color-red);
  letter-spacing: -0.04em;
}

.mk-app-control .pm-not-found-inner h1 {
  margin: 0;
  font-size: 24px;
  color: var(--mk-text);
}

.mk-app-control .pm-not-found-inner .mk-button {
  margin-top: 8px;
}

/* ─── Grouped detail-page list (one project = one row, languages nested) ─── */

.pm-collection-summary--groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-3) var(--mk-space-4);
}
.pm-collection-count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mk-space-2);
}
.pm-collection-count strong {
  font-size: var(--mk-font-size-h3);
  color: var(--mk-text);
}
.pm-collection-count span {
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-sm);
}

/* Language-problem filter tabs */
.pm-lang-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--mk-space-1);
  padding: 3px;
  background: var(--mk-bg-elev);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
}
.pm-filter-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px var(--mk-space-3);
  border-radius: var(--mk-radius-pill);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pm-filter-tab:hover {
  color: var(--mk-text);
  background: var(--mk-bg-elev-2);
}
.pm-filter-tab.is-active {
  color: #1a1205;
  background: var(--mk-color-warm);
  border-color: var(--mk-color-warm);
}

/* Group container + collapsed head */
.pm-groups {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-2);
}
.pm-group {
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: var(--mk-bg-elev);
  overflow: hidden;
}
.pm-group.is-open {
  background: var(--mk-bg-elev-2);
  border-color: color-mix(in srgb, var(--mk-color-warm) 35%, var(--mk-border));
}
.pm-group-head {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-space-2) var(--mk-space-3);
  flex-wrap: wrap;
}
.pm-group-toggle {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mk-text-muted);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
  flex: 0 0 auto;
}
.pm-group-toggle:hover {
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
}
.pm-group-caret {
  font-size: 13px;
  line-height: 1;
}
.pm-group-title {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: var(--mk-space-3);
  padding: 4px 0;
  min-width: 0;
  flex: 1 1 220px;
}
.pm-group-title:hover .pm-group-name {
  color: var(--mk-color-warm);
}
.pm-group-name {
  color: var(--mk-text);
  font-weight: 600;
  font-size: var(--mk-font-size-md);
  transition: color 120ms ease;
}
.pm-group-slug {
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-xs);
  opacity: 0.85;
}

/* Language pills */
.pm-group-langs {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}
.pm-lang-pill {
  appearance: none;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: var(--mk-radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 100ms ease, filter 100ms ease;
}
.pm-lang-pill:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.pm-lang-pill:disabled {
  cursor: not-allowed;
}
.pm-lang-pill.is-published {
  border-color: rgba(63, 185, 80, 0.5);
  color: #d5f5dc;
  background: rgba(63, 185, 80, 0.16);
}
.pm-lang-pill.is-draft {
  border-color: rgba(242, 201, 76, 0.55);
  color: #ffe9a8;
  background: rgba(242, 201, 76, 0.16);
}
.pm-lang-pill.is-missing {
  border: 1px dashed var(--mk-border);
  color: var(--mk-text-muted);
  background: transparent;
}

/* Meta + actions on the head */
.pm-group-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  flex: 0 0 auto;
}
.pm-group-template {
  font-size: var(--mk-font-size-xs);
}
.pm-group-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-1);
  flex: 0 0 auto;
  margin-left: auto;
}

/* Expanded per-language rows */
.pm-group-body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--mk-border);
  background: rgba(0, 0, 0, 0.16);
}
.pm-group-lang {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-space-2) var(--mk-space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--mk-border) 60%, transparent);
  flex-wrap: wrap;
}
.pm-group-lang:last-child {
  border-bottom: none;
}
.pm-lang-code {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--mk-radius-sm);
  background: var(--mk-bg-elev-2);
  border: 1px solid var(--mk-border);
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.pm-lang-title {
  flex: 1 1 200px;
  min-width: 0;
}
.pm-icon-link {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mk-text-muted);
  font-size: var(--mk-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--mk-radius-sm);
}
.pm-icon-link:hover:not(:disabled) {
  color: var(--mk-text);
  background: var(--mk-bg-elev-2);
}
.pm-icon-link.pm-danger-icon:hover:not(:disabled) {
  color: var(--mk-danger);
}

@media (max-width: 720px) {
  .pm-group-head {
    padding: var(--mk-space-2);
  }
  .pm-group-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  .pm-group-lang {
    padding: var(--mk-space-2);
  }
}


/* ─── Dark-panel theme restoration ─────────────────────────────────────────
   .mk-app-control overrides the :root dark theme to a LIGHT theme (dark text
   on white). Several working surfaces (canvas editor, live-preview toolbar,
   preview frames, visual sections) keep a DARK background, so any text inside
   them that uses --mk-text/--mk-text-muted (labels, buttons, inputs, hints)
   renders dark-on-dark and is invisible. Restoring the dark-theme tokens on
   those containers makes every inherited var-based element readable at once. */

.mk-page-preview-toolbar,
.mk-portfolio-card,
.mk-portfolio-preview-toolbar,
.mk-portfolio-preview-frame,
.mk-page-preview-scale,
.mk-page-browser-preview,
.mk-portfolio-browser-preview,
.mk-portfolio-editor-shell,
.mk-portfolio-form-panel,
.mk-portfolio-site-preview,
.mk-portfolio-preview-empty,
.mk-portfolio-shot-empty,
.mk-block-type-real-preview-viewport,
.mk-visual-section,
.mk-canvas-production-layer,
.mk-simple-asset-preview,
.mk-simple-video-thumb,
.pm-canvas-shell,
.pm-canvas-panel,
.pm-canvas-stage,
.pm-canvas-stage-bar {
  --mk-bg: #0b1020;
  --mk-bg-elev: #121a30;
  --mk-bg-elev-2: #1a2440;
  --mk-bg-hover: #222e4d;
  --mk-surface: #121a30;
  --mk-text: #f5f2f7;
  --mk-text-muted: #aab3c4;
  --mk-border: rgba(255, 255, 255, 0.16);
  --mk-danger: #ff6b6b;
  --mk-focus: #f2c94c;
  color: var(--mk-text);
}

/* ── Unified portfolio Hero editor ──────────────────────────────────────
   Restored after an external revert of this file wiped the uncommitted
   rules; also fixes the preview to fit both width AND available viewport
   height (see case_hero_editor.rs), so it's fully visible immediately. */
.mk-block-language-tabs{display:flex;gap:4px;padding:3px;background:#101a2a;border-radius:8px}
.mk-block-language-tabs button{min-height:36px;padding:7px 12px;border:0;border-radius:6px;background:transparent;color:#9eacc1;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.mk-block-language-tabs button:hover{color:#fff}
.mk-block-language-tabs button.is-active{background:#b72574;color:#fff;box-shadow:0 3px 8px rgba(183,37,116,.2)}

/* This workspace is intentionally always-dark regardless of the visitor's OS
   color-scheme preference. Re-scoping the shared design tokens here (rather
   than overriding every individual .mk-button/.mk-input color) is the single
   source of truth: any shared component used inside it — MediaField's
   buttons, .mk-button-secondary, .mk-input — automatically gets correct
   contrast, instead of silently inheriting the light-mode --mk-text/--mk-
   border values from :root and going dark-text-on-dark-background. */
.mk-case-hero-editor{
  --mk-text:#f8fafc;
  --mk-text-muted:#aebbd0;
  --mk-border:rgba(255,255,255,.18);
  --mk-bg-elev-2:#1b3144;
  margin-top:16px;background:#081020;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;color:#f8fafc;
}
.mk-case-hero-editor-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1);background:#0c1629}
.mk-case-hero-editor-head>div:first-child span{display:block;color:#f27db5;font-size:12px;font-weight:800}
.mk-case-hero-editor-head h3{margin:2px 0 4px;font-size:25px;letter-spacing:-.02em}
.mk-case-hero-editor-head p{margin:0;color:#aebbd0;font-size:13px}
.mk-case-hero-mobile-tabs{display:none}
.mk-case-hero-editor-grid{display:grid;grid-template-columns:minmax(380px,1fr) minmax(440px,1.15fr);align-items:start}
.mk-case-hero-controls{min-width:0;padding:24px;border-right:1px solid rgba(255,255,255,.1)}
.mk-case-hero-control-section{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid rgba(255,255,255,.09)}
.mk-case-hero-control-section h4,.mk-case-hero-section-head h4{margin:0 0 16px;font-size:17px;letter-spacing:-.01em}
.mk-case-hero-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.mk-case-hero-section-head span{color:#8fa0b8;font-size:12px}
.mk-case-hero-controls .pm-field{display:grid;gap:7px;margin-bottom:15px}
.mk-case-hero-controls .pm-field>span{font-size:12px;font-weight:750;color:#cbd5e1}
.mk-case-hero-controls .mk-input{min-height:44px;background:#101d31;border-color:rgba(255,255,255,.14);color:#f8fafc}
.mk-case-hero-controls textarea.mk-input{resize:vertical;line-height:1.55;padding-top:11px}
.mk-case-hero-controls .mk-input:focus{outline:2px solid #f27db5;outline-offset:1px;border-color:transparent}
.mk-case-hero-media-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.mk-case-hero-facts{display:grid;gap:9px;margin-bottom:12px}
.mk-case-hero-fact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;gap:8px}
.mk-case-hero-fact button{min-height:44px;padding:8px 11px;border:0;background:transparent;color:#f4a3c9;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.mk-case-hero-fact button:hover{text-decoration:underline}
.mk-case-hero-translate{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0 20px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.09)}
.mk-case-hero-translate>div{display:grid;gap:3px}
.mk-case-hero-translate span{color:#aebbd0;font-size:12px}
.mk-case-hero-status{margin:-12px 0 22px;color:#d9e4f3;font-size:13px}
.mk-case-hero-disclosure{border-bottom:1px solid rgba(255,255,255,.09)}
.mk-case-hero-disclosure summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;min-height:58px;cursor:pointer;font-size:15px;font-weight:800}
.mk-case-hero-disclosure summary span{color:#8fa0b8;font-size:12px;font-weight:500}
.mk-case-hero-disclosure-body{padding:4px 0 22px}
.mk-case-hero-checkbox-field{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:16px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#101d31;font-size:13px;font-weight:650;color:#e2e8f0;cursor:pointer}
.mk-case-hero-checkbox-field input{width:18px;height:18px;accent-color:#f27db5;cursor:pointer}
.mk-case-hero-controls>.mk-actions-row{position:sticky;bottom:0;z-index:2;margin:24px -24px -24px;padding:16px 24px;background:rgba(8,16,32,.96);border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}

/* Preview pane: sticky, but its own height is driven from Rust to always
   equal frame_height*scale where scale already fits both width and the
   real remaining viewport height — never taller than what's visible.
   `scale` itself is computed once, explicitly, in Rust (see
   `compute_scale`/`observe_stage_dimensions` in case_hero_editor.rs) from a
   real `ResizeObserver` measurement of `.mk-case-hero-preview-stage`'s own
   content-box width plus the real remaining viewport height, and applied
   directly as `transform: scale(...)` / `height: ...px` inline styles.
   This replaced an earlier CSS container-query version of the same math
   (`container-type` + `100cqi` + `--scale` custom property): that version
   measured correctly as written, but container query units used on an
   element that itself declares `container-type` measure the *next*
   ancestor container instead of that element, which is exactly the subtle
   footgun that caused two separate scale regressions earlier this session
   despite the CSS "looking right". An explicit number computed once in
   Rust has no such trap, and is directly loggable/unit-testable. */
.mk-case-hero-preview-pane{position:sticky;top:16px;min-width:0;padding:18px;background:#050a12}
.mk-case-hero-preview-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:#cbd5e1;font-size:12px}
.mk-case-hero-preview-tools>div{display:flex;padding:3px;background:#101a2a;border-radius:7px}
.mk-case-hero-preview-tools button{min-height:36px;padding:7px 10px;border:0;border-radius:5px;background:transparent;color:#9eacc1;font:inherit;font-weight:750;cursor:pointer}
.mk-case-hero-preview-tools button:hover,.mk-case-hero-preview-tools button.is-active{background:#24324a;color:#fff}
.mk-case-hero-preview-tools>button:last-child{outline:1px solid rgba(255,255,255,.18)}
.mk-case-hero-preview-stage{position:relative;display:flex;justify-content:center;min-width:0;width:100%;background:#161f2d;overflow:hidden}
.mk-case-hero-frame-scaler{position:relative;top:0;flex:0 0 auto;width:var(--frame-width);height:var(--frame-height);transform-origin:top center}
.mk-case-hero-preview-frame{display:block;width:var(--frame-width);height:var(--frame-height);border:0;background:#000}
.mk-case-hero-fullscreen{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;padding:64px 24px 24px;background:#03060c;color:#fff;overflow:auto}
/* No inner `.mk-case-hero-fullscreen-viewport` wrapper: with scale computed
   in Rust rather than via a container query, the scale/height only ever
   need to live on one element (the stage), same shape as the inline pane. */
.mk-case-hero-fullscreen-stage{position:relative;display:flex;justify-content:center;width:min(1440px,92vw);overflow:hidden}
.mk-case-hero-fullscreen-frame{display:block;width:var(--frame-width);height:var(--frame-height);border:0;background:#000}
.mk-case-hero-fullscreen-close{position:fixed;top:18px;right:22px;min-height:44px;padding:9px 15px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#111b2d;color:#fff;font:inherit;font-weight:800;cursor:pointer}

@media(max-width:1050px){
  .mk-case-hero-editor-grid{grid-template-columns:1fr}
  .mk-case-hero-controls{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .mk-case-hero-preview-pane{position:relative;top:auto}
}
@media(max-width:640px){
  .mk-case-hero-editor-head{align-items:flex-start;flex-direction:column;padding:18px}
  .mk-case-hero-editor-head .mk-block-language-tabs{width:100%}
  .mk-case-hero-editor-head .mk-block-language-tabs button{flex:1}
  .mk-case-hero-mobile-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#050a12;border-bottom:1px solid rgba(255,255,255,.1)}
  .mk-case-hero-mobile-tabs button{min-height:44px;border:0;border-radius:6px;background:transparent;color:#9eacc1;font:inherit;font-weight:800}
  .mk-case-hero-mobile-tabs button.is-active{background:#24324a;color:#fff}
  .mk-case-hero-controls.is-mobile-hidden,.mk-case-hero-preview-pane.is-mobile-hidden{display:none}
  .mk-case-hero-controls{padding:18px}
  .mk-case-hero-media-fields{grid-template-columns:1fr}
  .mk-case-hero-fact{grid-template-columns:1fr}
  .mk-case-hero-translate{align-items:stretch;flex-direction:column}
  .mk-case-hero-controls>.mk-actions-row{margin:20px -18px -18px;padding:14px 18px}
  .mk-case-hero-preview-pane{padding:12px}
  .mk-case-hero-preview-tools{align-items:flex-start;flex-wrap:wrap}
  .mk-case-hero-disclosure summary{grid-template-columns:1fr}
  .mk-case-hero-disclosure summary span{margin-top:-12px}
  .mk-case-hero-fullscreen{padding:72px 10px 10px}
}

/* ── Home hero release workspace (executable CMS: prodmedia.pl / home_hero) ──
   Same dark-panel/pink-accent language as .mk-case-hero-* above; this block
   was shipped with markup + Rust logic but no matching styles, so every
   .mk-hero-* / .mk-home-hero-workspace element rendered with browser defaults
   (see block-editor screenshot report). */
/* container-type here (not just a @media breakpoint) because this workspace
   docks into a *resizable* Page Studio panel (`--mk-studio-editor-width`,
   draggable independent of the browser viewport) as well as a pop-out
   panel window — the panel can be narrower than 900px in a plenty-wide
   browser window, or vice versa. A viewport media query can't see that;
   only the panel's own rendered width can. Without this, the two-column
   grid below (min 800px combined) stayed two columns and silently
   overflowed the actual (e.g. 560px) panel, clipping the right column —
   this looked like the preview being cut off, but the preview's own
   `zoom` scaling (see .mk-hero-preview-scale-frame) was already correct
   for the box it was given; that box just didn't fit its ancestor. */
.mk-home-hero-workspace{--ex-bg:#000;--ex-panel:#090a0c;--ex-panel-2:#101217;--ex-line:#2e3239;--ex-line-soft:rgba(255,255,255,.1);--ex-text:#fff;--ex-muted:#a1a7b3;--ex-dim:#666d79;--ex-accent:#ca0274;container-type:inline-size;container-name:mk-hero-workspace;display:flex;flex-direction:column;min-width:0;min-height:720px;background:var(--ex-bg);color:var(--ex-text);border:1px solid var(--ex-line);border-radius:8px;overflow:hidden;font-family:Arial,"Helvetica Neue",sans-serif}
.mk-hero-workspace-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;padding:12px 16px;border-bottom:1px solid var(--ex-line);background:#050506}
.mk-hero-workspace-header h3{margin:2px 0 4px;font-size:22px;letter-spacing:-.01em;color:#fff}
.mk-hero-workspace-header p{margin:0;color:#aebbd0;font-size:13px}
.mk-ex-brand{display:flex;align-items:center;gap:11px;min-width:180px}.mk-ex-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #fff;font-size:12px;font-weight:900;letter-spacing:-.08em}.mk-ex-brand>div{display:grid;gap:3px}.mk-ex-brand strong{font-size:13px;letter-spacing:.08em}.mk-ex-brand span:last-child{color:var(--ex-muted);font-size:9px;letter-spacing:.16em}
.mk-ex-document-state{display:flex;align-items:center;gap:8px;color:var(--ex-muted);font:600 10px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.mk-ex-state-dot{width:6px;height:6px;border-radius:50%;background:#65d878}.mk-ex-state-dot.is-error{background:#ff5a68}
.mk-hero-role-state{display:flex;align-items:center;gap:12px;flex-shrink:0}
.mk-hero-role-badge{display:inline-flex;align-items:center;border-radius:var(--mk-radius-pill);padding:5px 12px;font-size:12px;font-weight:750;border:1px solid rgba(242,201,76,.45);color:#ffe9a8;background:rgba(242,201,76,.12);white-space:nowrap}
.mk-hero-role-badge.is-authorized{border-color:rgba(63,185,80,.45);color:#d5f5dc;background:rgba(63,185,80,.12)}

.mk-hero-alert{margin:16px 24px 0;padding:12px 16px;border-radius:var(--mk-radius-md);font-size:13px;display:flex;flex-direction:column;gap:2px}
.mk-hero-alert strong{font-size:13px}
.mk-hero-alert.is-error{border:1px solid rgba(248,81,73,.5);color:#ffd8d6;background:rgba(248,81,73,.14)}
.mk-hero-alert.is-warning{border:1px solid rgba(242,201,76,.5);color:#ffe9a8;background:rgba(242,201,76,.14)}
.mk-hero-alert.is-success{border:1px solid rgba(101,216,120,.5);color:#c9ffd2;background:rgba(101,216,120,.12)}

.mk-hero-primary-tabs{display:flex;gap:0;padding:0 16px;border-bottom:1px solid var(--ex-line);background:#050506;overflow-x:auto}
.mk-hero-primary-tabs button{min-height:43px;padding:9px 17px;border:0;border-radius:0;background:transparent;color:var(--ex-muted);font:700 10px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.mk-hero-primary-tabs button:hover{color:#e6edf3}
.mk-hero-primary-tabs button.is-active{color:#fff;background:#0d0e11;box-shadow:inset 0 -2px 0 var(--ex-accent)}

.mk-home-hero-workspace .mk-hero-secondary-tabs{display:flex;gap:0;padding:0;margin:0;border-bottom:1px solid var(--ex-line);background:#08090b;border-radius:0;overflow-x:auto}
.mk-home-hero-workspace .mk-hero-secondary-tabs button{min-height:40px;padding:8px 11px;border:0;border-right:1px solid var(--ex-line-soft);border-radius:0;background:transparent;color:var(--ex-muted);font:700 9px/1 ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.mk-hero-secondary-tabs button:hover{color:#e6edf3}
.mk-home-hero-workspace .mk-hero-secondary-tabs button.is-active{background:#17191e;color:#fff;box-shadow:inset 0 -1px 0 var(--ex-accent)}

.mk-ex-visual-workspace{display:grid;grid-template-columns:190px minmax(440px,1fr) minmax(360px,420px);min-height:680px;background:var(--ex-bg)}
.mk-ex-library,.mk-ex-inspector{min-width:0;background:var(--ex-panel);overflow:auto}.mk-ex-library{border-right:1px solid var(--ex-line)}.mk-ex-inspector{border-left:1px solid var(--ex-line)}
.mk-ex-panel-title{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 12px;border-bottom:1px solid var(--ex-line);font:700 9px/1 ui-monospace,monospace;letter-spacing:.11em}.mk-ex-panel-title span{color:var(--ex-dim);font-size:8px}
.mk-ex-search{display:block;padding:10px;border-bottom:1px solid var(--ex-line-soft)}.mk-ex-search input{width:100%;height:34px;padding:0 10px;border:1px solid var(--ex-line);border-radius:4px;background:#050506;color:#fff;font:11px/1 ui-monospace,monospace}.mk-ex-search input:focus{outline:1px solid var(--ex-accent);outline-offset:1px}
.mk-ex-library-section{padding:12px 10px;border-bottom:1px solid var(--ex-line-soft)}.mk-ex-library-section.is-folded{padding:9px 10px}.mk-ex-section-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0 0 9px;padding:2px 0;border:0;background:none;color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer}.mk-ex-library-section.is-folded .mk-ex-section-toggle{margin-bottom:0}.mk-ex-section-toggle:hover{color:var(--ex-text)}.mk-ex-section-toggle em{display:flex;align-items:center;gap:7px;font-style:normal;letter-spacing:0}.mk-ex-section-toggle em::after{content:"+";display:inline-block;width:8px;text-align:center;font-size:10px;line-height:1}.mk-ex-section-toggle[aria-expanded="true"] em::after{content:"−"}.mk-ex-element-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mk-ex-element-grid button,.mk-ex-structure-list button{border:1px solid var(--ex-line);border-radius:4px;background:#0e1014;color:#fff;cursor:pointer}.mk-ex-element-grid button{display:grid;place-items:center;gap:7px;min-height:72px;padding:10px 4px}.mk-ex-element-grid button span{display:grid;place-items:center;width:28px;height:24px;border:1px solid #4a505b;color:#c8cbd2;font:700 8px/1 ui-monospace,monospace}.mk-ex-element-grid button strong{font-size:10px}.mk-ex-element-grid button:hover,.mk-ex-structure-list button:hover{border-color:#777e8a;background:#17191e}.mk-ex-structure-list{display:grid;gap:4px}.mk-ex-structure-list button{display:flex;align-items:center;gap:8px;min-height:32px;padding:5px 8px;text-align:left}.mk-ex-structure-list button span{color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace}.mk-ex-structure-list button strong{font-size:10px}.mk-ex-library-note{margin:0;padding:12px;color:var(--ex-dim);font-size:9px;line-height:1.5}
.mk-ex-canvas-column{display:flex;flex-direction:column;min-width:0;background:#050506}.mk-ex-canvas-toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border-bottom:1px solid var(--ex-line);background:#090a0c}.mk-ex-canvas-tools{display:flex}.mk-ex-canvas-tools button{min-width:38px;height:32px;border:1px solid var(--ex-line);border-right:0;background:#0d0f12;color:var(--ex-muted);font:700 8px/1 ui-monospace,monospace;cursor:pointer}.mk-ex-canvas-tools button:last-child{border-right:1px solid var(--ex-line)}.mk-ex-canvas-tools button.is-active{background:var(--ex-accent);color:#fff}.mk-ex-canvas-status{overflow:hidden;color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace;letter-spacing:.1em;white-space:nowrap;text-overflow:ellipsis}.mk-ex-canvas-selectors{display:flex;gap:5px}.mk-ex-canvas-selectors select{height:32px;padding:0 24px 0 8px;border:1px solid var(--ex-line);border-radius:3px;background:#0d0f12;color:#fff;font:700 9px/1 ui-monospace,monospace}
.mk-ex-canvas-stage{position:relative;display:flex;align-items:flex-start;justify-content:center;flex:1;min-height:590px;padding:34px 24px;background-color:#08090a;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:20px 20px;overflow:auto}.mk-ex-canvas-stage .mk-hero-preview-scale-wrap{position:relative;z-index:1;border:1px solid #40444d;border-radius:0;box-shadow:0 22px 60px rgba(0,0,0,.6)}.mk-ex-canvas-axis{position:absolute;z-index:0;background:rgba(202,2,116,.24)}.mk-ex-canvas-axis.is-x{left:0;right:0;top:50%;height:1px}.mk-ex-canvas-axis.is-y{top:0;bottom:0;left:50%;width:1px}.mk-ex-canvas-footer{display:flex;align-items:center;justify-content:space-between;min-height:28px;padding:0 10px;border-top:1px solid var(--ex-line);color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace;letter-spacing:.1em}
.mk-ex-canvas-motion{display:flex}.mk-ex-canvas-motion button{min-width:44px;height:32px;padding:0 8px;border:1px solid var(--ex-line);border-right:0;background:#0d0f12;color:var(--ex-muted);font:700 8px/1 ui-monospace,monospace;cursor:pointer}.mk-ex-canvas-motion button+button{border-left:0}.mk-ex-canvas-motion button.is-active{background:var(--ex-accent);color:#fff}.mk-ex-canvas-motion .mk-ex-canvas-motion-play{min-width:34px;color:#fff}.mk-ex-canvas-motion button:last-child{border-right:1px solid var(--ex-line)}
.mk-layer-motion-chip{display:inline-grid;place-items:center;min-width:14px;height:14px;padding:0 2px;margin-left:2px;border-radius:2px;font:700 7px/1 ui-monospace,monospace;color:#fff;cursor:default}
.mk-layer-motion-chip.is-view{background:#7c3aed}.mk-layer-motion-chip.is-load{background:#2563eb}.mk-layer-motion-chip.is-hover{background:#16a34a}.mk-layer-motion-chip.is-loop{background:#d97706}.mk-layer-motion-chip.is-css{background:#52525b}.mk-layer-motion-chip.is-logic{background:#ca8a04}.mk-layer-motion-chip.is-3d{background:#0891b2}
.mk-ex-motion-badges{position:absolute;inset:0;pointer-events:none;z-index:5}
.mk-ex-motion-badge{position:absolute;pointer-events:auto;display:grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border:1px solid rgba(0,0,0,.55);border-radius:9px;font:700 9px/1 ui-monospace,monospace;color:#fff;cursor:pointer;transform:scale(var(--ex-inv,1));transform-origin:top left;opacity:.92;white-space:pre}
.mk-ex-motion-badge.is-view{background:#7c3aed}.mk-ex-motion-badge.is-load{background:#2563eb}.mk-ex-motion-badge.is-hover{background:#16a34a}.mk-ex-motion-badge.is-loop{background:#d97706}.mk-ex-motion-badge.is-css{background:#52525b}.mk-ex-motion-badge.is-logic{background:#ca8a04}.mk-ex-motion-badge.is-3d{background:#0891b2}
.mk-ex-motion-badge:hover{opacity:1;outline:1px solid #fff}
.mk-ex-motion-count{color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace;letter-spacing:.1em}
.mk-motion-css-popup{position:absolute;right:14px;bottom:44px;z-index:100003;width:min(360px,90vw);padding:12px;border:1px solid var(--ex-line);background:#0d0f12;color:#e5e7eb;font-size:12px}
.mk-motion-css-popup header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mk-motion-css-popup dl{display:grid;gap:4px;margin:0 0 8px}.mk-motion-css-popup dl div{display:flex;gap:8px}.mk-motion-css-popup dt{min-width:64px;color:var(--ex-dim);font:700 8px/1.6 ui-monospace,monospace;text-transform:uppercase}.mk-motion-css-popup dd{margin:0}
.mk-motion-css-selector{font:400 10px/1.4 ui-monospace,monospace;word-break:break-all}
.mk-motion-css-popup p{margin:0;color:var(--ex-muted);font-size:11px;line-height:1.5}
.mk-motion-item.is-css{opacity:.92}
.mk-motion-css-tag{display:inline-grid;place-items:center;min-width:28px;height:16px;border-radius:2px;background:#52525b;color:#fff;font:700 8px/1 ui-monospace,monospace}
.mk-motion-cycle .mk-motion-item.is-cycle-member{align-items:center;gap:8px}
.mk-motion-cycle .mk-motion-item.is-self{outline:1px solid var(--ex-accent);outline-offset:-1px}
.mk-motion-ordinal{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:#1f2937;color:#e5e7eb;font:700 9px/1 ui-monospace,monospace}
.mk-motion-self-tag{color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace}
.mk-motion-css-cycle{display:grid;gap:6px;margin:0 0 8px;padding:8px;border:1px solid var(--ex-line);background:#101318}
.mk-motion-css-cycle strong{font-size:11px}
.mk-motion-css-cycle ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.mk-motion-cycle-jump{padding:2px 0;border:0;background:transparent;color:#93c5fd;font:600 10px/1.4 ui-monospace,monospace;text-align:left;cursor:pointer}
.mk-motion-cycle-jump:hover{text-decoration:underline}
.mk-rotator-section{border:1px solid var(--ex-line);padding:10px;margin-bottom:10px;background:#0f1116}
.mk-rotator-pair{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.mk-rotator-pair-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.mk-rotator-warning{display:flex;align-items:center;gap:8px;margin:6px 0;padding:6px 8px;border:1px solid #b45309;color:#fbbf24;font-size:10px;line-height:1.4}
.mk-rotator-note{margin:8px 0 0;color:var(--ex-dim);font-size:10px;line-height:1.5}
.mk-field-inline{display:flex;align-items:center;gap:8px;font-size:11px}
.mk-hero-copy-form{display:flex;flex-direction:column;gap:12px;max-width:840px}.mk-hero-copy-form .mk-hero-content-note{margin:0}.mk-hero-copy-group-title{margin:14px 0 0;padding-bottom:5px;border-bottom:1px solid var(--ex-line);color:var(--ex-dim);font:700 9px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.mk-hero-copy-form .mk-field{display:grid;gap:7px}.mk-hero-copy-form .mk-field.is-missing .mk-input{border-color:#b45309}.mk-field-missing{font-style:normal;color:#d97706;font:400 10px/1.3 ui-monospace,monospace}
.mk-field-inherited{display:block;margin-top:3px;font-style:normal;color:var(--ex-dim);font:400 10px/1.3 ui-monospace,monospace}
.mk-ex-inspector>.mk-layers-panel{min-height:0}.mk-ex-inspector .mk-layer-list-panel{width:100%;max-height:280px;border-right:0;border-bottom:1px solid var(--ex-line)}.mk-ex-inspector .mk-layers-panel{flex-direction:column}.mk-ex-inspector .mk-layer-inspector{padding:12px}.mk-layer-inspector-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin:0 -12px 12px;border-block:1px solid var(--ex-line)}.mk-layer-inspector-tabs button{min-height:34px;border:0;border-right:1px solid var(--ex-line);background:#090a0c;color:var(--ex-muted);font:700 8px/1 ui-monospace,monospace;text-transform:uppercase}.mk-layer-inspector-tabs button.is-active{background:#17191e;color:#fff;box-shadow:inset 0 -1px var(--ex-accent)}.mk-layer-context-note{display:grid;gap:6px;padding:12px;border:1px solid var(--ex-line);background:#0d0f12}.mk-layer-context-note strong{font-size:11px}.mk-layer-context-note span{color:var(--ex-muted);font-size:10px;line-height:1.5}
.mk-ex-tree{max-height:330px;overflow:auto;border-bottom:1px solid var(--ex-line);padding:5px 0}.mk-ex-tree .mk-layer-item{position:relative;margin:1px 6px;padding-left:calc(7px + var(--ex-tree-depth,0) * 14px)}.mk-ex-tree .mk-layer-item:before{content:"";position:absolute;left:calc(8px + var(--ex-tree-depth,0) * 14px);top:-7px;bottom:-7px;width:1px;background:rgba(161,167,179,.14)}.mk-ex-tree .mk-layer-tree-branch{position:relative;z-index:1;width:12px;color:var(--ex-dim);font:700 9px/1 ui-monospace,monospace}.mk-ex-tree .mk-layer-type-icon{display:grid;place-items:center;min-width:26px;height:20px;border:1px solid var(--ex-line);color:var(--ex-muted);font:700 7px/1 ui-monospace,monospace}.mk-ex-tree .mk-layer-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-ex-properties{min-height:280px}.mk-ex-properties .mk-layer-inspector-content{padding:12px}.mk-ex-properties .mk-layer-inspector-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:12px}.mk-ex-properties .mk-layer-type-name{color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace;text-transform:uppercase}.mk-ex-properties .mk-layer-inspector-tabs{margin-inline:-12px}

.mk-hero-visual-layout,.mk-hero-code-preview-layout{display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,1.1fr);align-items:start;gap:0}
.mk-hero-editor-pane,.mk-hero-code-workspace{min-width:0;padding:22px 24px;border-right:1px solid rgba(255,255,255,.1)}
.mk-hero-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mk-hero-field-grid .mk-field{display:grid;gap:7px}
.mk-hero-field-grid .mk-input-label{font-size:12px;font-weight:750;color:#cbd5e1}
.mk-hero-field-grid .mk-input{min-height:44px;background:#101d31;border-color:rgba(255,255,255,.14);color:#f8fafc}
.mk-hero-field-grid textarea.mk-input{resize:vertical;line-height:1.55;padding-top:11px}
.mk-hero-field-grid .mk-toggle-row{grid-column:1/-1}

.mk-hero-preview-pane{position:sticky;top:16px;min-width:0;padding:18px;background:#050a12}
.mk-hero-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mk-hero-preview-toolbar span{color:#9eacc1;font-size:12px;font-weight:700}
.mk-hero-preview-toolbar select.mk-input{min-height:36px;padding:6px 10px;font-size:12px}
/* `.mk-hero-preview-scale-wrap` is the query container (`container-type:
   inline-size`) so `.mk-hero-preview-scale-frame` can size itself off the
   wrap's real (possibly docked-narrow) width via `cqw`, with no JS/
   ResizeObserver. Shrinking used `transform: scale()` + a `:has()` rule
   setting the WRAP's own height from a `calc()` that also reads its own
   `cqw` — confirmed in isolation (Chromium 151) that a container's *own*
   size property depending on a `calc()` that reads *its own* cq units
   resolves to a bogus value (e.g. the frame's unscaled native height),
   even though the axis being set (height) differs from the one the cq
   unit measures (width/inline-size); the browser still treats it as
   circular. `zoom` (unlike `transform`) shrinks the actual layout box —
   not just paint — so the frame's own `cqw`-driven zoom naturally shrinks
   `.mk-hero-preview-scale-wrap`'s auto height to match (confirmed: wrap's
   computed height comes out exactly right with zero extra rules), and the
   frame is a *descendant* of the container, not the container itself, so
   it doesn't hit the same self-reference restriction. */
.mk-hero-preview-scale-wrap{position:relative;width:100%;overflow:hidden;border-radius:var(--mk-radius-md);background:#161f2d}
.mk-hero-preview-scale-frame{position:relative;display:block;transform-origin:top left}
.mk-ex-preview-measure{position:relative;z-index:1;width:100%;min-width:0}
/* ── Selection rectangle ─────────────────────────────────────────────
   Drawn over the preview iframe, rotated with the layer it tracks. Every
   fixed dimension is multiplied by --ex-inv (the inverse of the preview's
   fit scale, set inline) so grips and labels stay the same physical size
   whether the canvas renders at 100% or at 35%. */
.mk-ex-selection-overlay{--ex-grip:calc(11px * var(--ex-inv, 1));position:absolute;z-index:100000;transform-origin:50% 50%;
  border:calc(1.5px * var(--ex-inv, 1)) solid var(--ex-accent);
  box-shadow:0 0 0 calc(1px * var(--ex-inv, 1)) rgba(0,0,0,.55),0 0 calc(18px * var(--ex-inv, 1)) rgba(202,2,116,.28);
  pointer-events:none;transition:opacity .12s ease}
.mk-ex-selection-overlay.is-dragging{box-shadow:0 0 0 calc(1px * var(--ex-inv, 1)) rgba(0,0,0,.55)}
.mk-ex-selection-label{position:absolute;left:calc(-1.5px * var(--ex-inv, 1));bottom:calc(100% + calc(5px * var(--ex-inv, 1)));
  padding:calc(3px * var(--ex-inv, 1)) calc(6px * var(--ex-inv, 1));background:var(--ex-accent);color:#fff;
  font:700 calc(9px * var(--ex-inv, 1))/1 ui-monospace,monospace;letter-spacing:.04em;white-space:nowrap;border-radius:calc(2px * var(--ex-inv, 1))}
/* Live values while dragging: read below the box so the pointer never covers them. */
.mk-ex-selection-readout{position:absolute;left:calc(-1.5px * var(--ex-inv, 1));top:calc(100% + calc(5px * var(--ex-inv, 1)));
  padding:calc(3px * var(--ex-inv, 1)) calc(6px * var(--ex-inv, 1));background:#0b1120e6;color:#e6edf3;
  font:600 calc(9px * var(--ex-inv, 1))/1 ui-monospace,monospace;white-space:pre;border-radius:calc(2px * var(--ex-inv, 1));
  border:1px solid rgba(255,255,255,.16);opacity:0;transition:opacity .12s ease}
.mk-ex-selection-overlay:hover .mk-ex-selection-readout,.mk-ex-selection-overlay.is-dragging .mk-ex-selection-readout{opacity:1}
.mk-ex-selection-body{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(202,2,116,.03);pointer-events:auto}
/* The toolbar tool decides what dragging the body does, and the cursor says so. */
.mk-ex-selection-overlay.is-select .mk-ex-selection-body{cursor:default}
.mk-ex-selection-overlay.is-move .mk-ex-selection-body{cursor:move}
.mk-ex-selection-overlay.is-resize .mk-ex-selection-body{cursor:nwse-resize}
.mk-ex-selection-overlay.is-rotate .mk-ex-selection-body{cursor:grab}
.mk-ex-selection-overlay.is-dragging .mk-ex-selection-body{cursor:grabbing}
.mk-ex-selection-handle{position:absolute;z-index:2;width:var(--ex-grip);height:var(--ex-grip);padding:0;
  border:calc(1.5px * var(--ex-inv, 1)) solid #fff;background:var(--ex-accent);border-radius:calc(1px * var(--ex-inv, 1));
  box-shadow:0 0 calc(4px * var(--ex-inv, 1)) rgba(0,0,0,.5);pointer-events:auto}
.mk-ex-selection-handle:focus-visible{outline:calc(2px * var(--ex-inv, 1)) solid #fff;outline-offset:calc(1px * var(--ex-inv, 1))}
.mk-ex-selection-handle.is-nw{left:calc(var(--ex-grip) / -2);top:calc(var(--ex-grip) / -2);cursor:nwse-resize}
.mk-ex-selection-handle.is-n{left:50%;top:calc(var(--ex-grip) / -2);margin-left:calc(var(--ex-grip) / -2);cursor:ns-resize}
.mk-ex-selection-handle.is-ne{right:calc(var(--ex-grip) / -2);top:calc(var(--ex-grip) / -2);cursor:nesw-resize}
.mk-ex-selection-handle.is-e{right:calc(var(--ex-grip) / -2);top:50%;margin-top:calc(var(--ex-grip) / -2);cursor:ew-resize}
.mk-ex-selection-handle.is-se{right:calc(var(--ex-grip) / -2);bottom:calc(var(--ex-grip) / -2);cursor:nwse-resize}
.mk-ex-selection-handle.is-s{left:50%;bottom:calc(var(--ex-grip) / -2);margin-left:calc(var(--ex-grip) / -2);cursor:ns-resize}
.mk-ex-selection-handle.is-sw{left:calc(var(--ex-grip) / -2);bottom:calc(var(--ex-grip) / -2);cursor:nesw-resize}
.mk-ex-selection-handle.is-w{left:calc(var(--ex-grip) / -2);top:50%;margin-top:calc(var(--ex-grip) / -2);cursor:ew-resize}
.mk-ex-selection-handle.is-rotate{left:50%;top:calc(-30px * var(--ex-inv, 1));margin-left:calc(var(--ex-grip) / -2);border-radius:50%;cursor:grab}
.mk-ex-selection-handle.is-rotate:after{content:"";position:absolute;left:50%;top:100%;width:calc(1.5px * var(--ex-inv, 1));
  height:calc(19px * var(--ex-inv, 1));margin-left:calc(-0.75px * var(--ex-inv, 1));background:var(--ex-accent)}
/* On-canvas quick actions: add/duplicate/delete for the selection, anchored
   above the top-right corner (the label owns the top-left). Same --ex-inv
   arithmetic as the rest of the selection chrome. */
.mk-ex-selection-actions{position:absolute;right:calc(-1.5px * var(--ex-inv, 1));bottom:calc(100% + calc(5px * var(--ex-inv, 1)));display:flex;z-index:3;pointer-events:auto}
.mk-ex-selection-actions button{min-width:calc(24px * var(--ex-inv, 1));height:calc(18px * var(--ex-inv, 1));padding:0 calc(5px * var(--ex-inv, 1));border:calc(1px * var(--ex-inv, 1)) solid rgba(255,255,255,.28);border-right:0;background:#0b1120e6;color:#fff;font:700 calc(9px * var(--ex-inv, 1))/1 ui-monospace,monospace;cursor:pointer;pointer-events:auto}
.mk-ex-selection-actions button:last-child{border-right:calc(1px * var(--ex-inv, 1)) solid rgba(255,255,255,.28)}
.mk-ex-selection-actions button:hover{background:#1c2740}
.mk-ex-selection-actions button.is-active{background:var(--ex-accent)}
.mk-ex-selection-actions button.is-danger{color:#f87171}
.mk-ex-selection-overlay.is-dragging .mk-ex-selection-actions,.mk-ex-selection-overlay.is-dragging .mk-ex-add-menu{display:none}
/* No headroom above the frame (the scale wrap clips there): move inside. */
.mk-ex-selection-actions.is-inside{bottom:auto;top:calc(4px * var(--ex-inv, 1))}
.mk-ex-add-menu.is-inside{top:calc(26px * var(--ex-inv, 1))}
/* No room to the left of the box's right edge: grow rightward instead. */
.mk-ex-selection-actions.is-left,.mk-ex-add-menu.is-left{right:auto;left:calc(-1.5px * var(--ex-inv, 1))}
.mk-ex-add-menu{position:absolute;right:calc(-1.5px * var(--ex-inv, 1));top:calc(3px * var(--ex-inv, 1));z-index:4;display:grid;min-width:calc(150px * var(--ex-inv, 1));border:calc(1px * var(--ex-inv, 1)) solid rgba(255,255,255,.28);background:#0d0f12;pointer-events:auto}
.mk-ex-add-menu button{display:flex;align-items:center;gap:calc(8px * var(--ex-inv, 1));min-width:0;height:auto;padding:calc(7px * var(--ex-inv, 1)) calc(10px * var(--ex-inv, 1));border:0;border-bottom:calc(1px * var(--ex-inv, 1)) solid rgba(255,255,255,.08);background:transparent;color:#e5e7eb;font:600 calc(10px * var(--ex-inv, 1))/1 ui-monospace,monospace;text-align:left;cursor:pointer}
.mk-ex-add-menu button:last-child{border-bottom:0}
.mk-ex-add-menu button:hover{background:#17191e}
.mk-ex-add-menu .mk-layer-type-icon{display:grid;place-items:center;min-width:calc(26px * var(--ex-inv, 1));height:calc(18px * var(--ex-inv, 1));border:calc(1px * var(--ex-inv, 1)) solid rgba(255,255,255,.2);font:700 calc(7px * var(--ex-inv, 1))/1 ui-monospace,monospace}
/* Toolbar variant of the same menu: normal chrome scale, drops below. */
.mk-ex-toolbar-add{position:relative;display:inline-flex}
.mk-ex-toolbar-add>button{min-width:52px;color:#fff}
.mk-ex-toolbar-add>button.is-active{background:var(--ex-accent)}
.mk-ex-toolbar-add .mk-ex-add-menu{--ex-inv:1;left:0;right:auto;top:100%;z-index:20;min-width:150px}
/* Hover affordance: shows what a click would select, without competing with
   the selection rectangle's weight. */
/* Editing state: the overlay becomes a passive frame so every click and
   keystroke belongs to the caret inside the preview. */
.mk-ex-selection-overlay.is-editing{border-style:dashed;border-color:#37d39a;box-shadow:0 0 0 calc(1px * var(--ex-inv, 1)) rgba(0,0,0,.55),0 0 calc(18px * var(--ex-inv, 1)) rgba(55,211,154,.25)}
.mk-ex-selection-overlay.is-editing .mk-ex-selection-label{background:#37d39a;color:#04140d}
.mk-ex-hover-box{position:absolute;z-index:99999;transform-origin:50% 50%;pointer-events:none;
  border:calc(1px * var(--ex-inv, 1)) dashed rgba(255,255,255,.55);background:rgba(202,2,116,.05)}
/* ── Type controls ───────────────────────────────────────────────────
   An override surface: every control maps to exactly one declaration in
   the layer's generated rule, and an empty control means "inherit". */
/* The preview is the focal-point control: the dot marks what survives a crop. */
.mk-focal-pad{position:relative;display:block;cursor:crosshair;touch-action:none;border:1px solid rgba(255,255,255,.1);border-radius:var(--mk-radius-sm);overflow:hidden;background:#0c0e11}
.mk-focal-pad img{display:block;width:100%;max-height:180px;object-fit:contain;pointer-events:none;border:0;border-radius:0}
.mk-focal-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;
  background:rgba(202,2,116,.85);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.5);pointer-events:none}
.mk-media-panel{display:flex;flex-direction:column;gap:10px}
.mk-media-preview{display:flex;flex-direction:column;gap:8px}
.mk-media-preview img{width:100%;max-height:180px;object-fit:contain;background:#0c0e11;border:1px solid rgba(255,255,255,.1);border-radius:var(--mk-radius-sm)}
.mk-media-empty{display:flex;align-items:center;justify-content:center;height:96px;border:1px dashed rgba(255,255,255,.22);border-radius:var(--mk-radius-sm);color:#8fa0b8;font-size:12px}
.mk-media-preview-actions{display:flex;gap:6px}
.mk-media-meta{margin:0;color:#8fa0b8;font:600 11px/1.4 ui-monospace,monospace}
/* Says plainly which width an edit lands in — the difference between styling a
   layer and quietly rewriting the desktop layout. */
/* Drag affordance in the layer tree. Derived layers are not draggable, and
   look it: they stand for nodes the slot's own markup owns. */
.mk-layer-item.is-draggable{cursor:grab}
.mk-layer-item.is-draggable:active{cursor:grabbing}
.mk-layer-item.is-draggable:hover{background:rgba(255,255,255,.04)}
.mk-ex-preset-list{display:flex;flex-direction:column;gap:4px;padding:0 8px 8px}
.mk-ex-preset{display:block;width:100%;padding:7px 9px;text-align:left;border:1px solid var(--ex-line);border-radius:4px;
  background:#0c0e11;color:var(--ex-text);cursor:pointer}
.mk-ex-preset:hover{background:#17191e;border-color:#4a4f5c}
.mk-ex-preset strong{display:block;font:700 10px/1.3 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.mk-ex-preset span{display:block;margin-top:2px;color:#8fa0b8;font-size:10.5px;line-height:1.35}
/* ── Buttons inside the editor ───────────────────────────────────────
   The workspace is a fixed dark surface with its own token set, but the
   shared button styles read the global theme tokens — which flip to the
   light palette on a light-preference system. That produced a white slab
   with dark text on black, and secondary buttons whose labels disappeared
   into the background. Inside the workspace, buttons use the workspace's
   own tokens and are theme-independent, like everything else here. */
.mk-home-hero-workspace .mk-button{min-height:32px;padding:6px 12px;border-radius:4px;
  background:var(--ex-accent);color:#fff;border:1px solid var(--ex-accent);
  font:700 11px/1.25 ui-monospace,monospace;letter-spacing:.03em;box-shadow:none;transform:none}
.mk-home-hero-workspace .mk-button:hover:not(:disabled){background:#e0349a;border-color:#e0349a;box-shadow:none;transform:none}
.mk-home-hero-workspace .mk-button:focus-visible{outline:2px solid #ff8fc4;outline-offset:2px}
.mk-home-hero-workspace .mk-button:disabled{opacity:1;background:#17191e;border-color:var(--ex-line);color:var(--ex-dim);cursor:not-allowed}

.mk-home-hero-workspace .mk-button-secondary{background:#0c0e11;color:var(--ex-text);border-color:var(--ex-line)}
.mk-home-hero-workspace .mk-button-secondary:hover:not(:disabled){background:#17191e;border-color:#4a4f5c;color:#fff}
.mk-home-hero-workspace .mk-button-secondary:disabled{background:#0c0e11;border-color:var(--ex-line);color:var(--ex-dim)}

.mk-home-hero-workspace .mk-button-danger{background:#0c0e11;color:#ff8f8a;border-color:rgba(185,67,63,.55)}
.mk-home-hero-workspace .mk-button-danger:hover:not(:disabled){background:#B9433F;border-color:#B9433F;color:#fff}

/* Small buttons carry real sentences here ("snap x to 616"), so they wrap
   instead of clipping the label at a fixed height. */
.mk-home-hero-workspace .mk-button-sm{min-height:26px;height:auto;padding:5px 9px;font-size:10px;
  white-space:normal;text-align:left;line-height:1.35}
.mk-brand-item .mk-button-sm{margin-top:2px;max-width:100%}
/* ── Brand book findings ─────────────────────────────────────────────
   A work queue, not decoration: severity, the layer, the book's section,
   and the correction the book implies. */
.mk-brand-chip{padding:3px 9px;border:1px solid #343841;border-radius:3px;background:#0c0e11;color:#9aa3b2;
  font:700 10px/1.4 ui-monospace,monospace;letter-spacing:.08em;cursor:pointer}
.mk-brand-chip:hover{border-color:#4a4f5c;color:#e6edf3}
.mk-brand-chip.is-warning{border-color:rgba(255,182,72,.5);color:#ffb648}
.mk-brand-chip.is-error{border-color:rgba(185,67,63,.65);color:#ff8f8a;background:rgba(185,67,63,.12)}
.mk-brand-chip.is-open{background:rgba(255,255,255,.08);color:#fff}
.mk-brand-panel{position:absolute;right:14px;bottom:44px;z-index:100003;width:min(460px,calc(100% - 28px));max-height:62%;
  display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:var(--mk-radius-sm);
  background:#0b0f16f2;backdrop-filter:blur(6px);box-shadow:0 18px 48px rgba(0,0,0,.5)}
.mk-brand-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.mk-brand-panel header strong{color:#e6edf3;font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.mk-brand-list{margin:0;padding:0;list-style:none;overflow-y:auto}
.mk-brand-item{padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.06);border-left:3px solid transparent}
.mk-brand-item.is-error{border-left-color:#B9433F;background:rgba(185,67,63,.07)}
.mk-brand-item.is-warning{border-left-color:#F2C14E;background:rgba(242,193,78,.05)}
.mk-brand-item-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mk-brand-severity{font:700 9px/1 ui-monospace,monospace;letter-spacing:.1em;color:#9aa3b2}
.mk-brand-item.is-error .mk-brand-severity{color:#ff8f8a}
.mk-brand-item.is-warning .mk-brand-severity{color:#ffb648}
.mk-brand-layer{padding:0;border:0;background:none;color:#e0609e;font:600 11px/1.3 inherit;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.mk-brand-layer.is-static{color:#9aa3b2;text-decoration:none;cursor:default}
.mk-brand-scope{padding:1px 5px;border-radius:2px;background:rgba(93,188,252,.16);color:#9ad2ff;font:700 9px/1.5 ui-monospace,monospace}
.mk-brand-reference{margin-left:auto;color:#7f8794;font:600 9px/1.5 ui-monospace,monospace}
.mk-brand-detail{margin:5px 0 7px;color:#c8d2df;font-size:11.5px;line-height:1.45}
.mk-brand-clean{margin:0;padding:10px 11px;color:#8fa0b8;font-size:11.5px}
.mk-breakpoint-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;padding:9px 10px;
  border:1px solid rgba(93,188,252,.35);border-left:3px solid #5dbcfc;border-radius:var(--mk-radius-sm);background:rgba(93,188,252,.08)}
.mk-breakpoint-banner.is-overridden{border-color:rgba(255,182,72,.4);border-left-color:#ffb648;background:rgba(255,182,72,.09)}
.mk-breakpoint-banner strong{display:block;color:#e6edf3;font:700 11px/1.3 ui-monospace,monospace;letter-spacing:.06em}
.mk-breakpoint-banner span{display:block;margin-top:3px;color:#9aa8bd;font-size:11px;line-height:1.4}
.mk-breakpoint-banner button{flex-shrink:0}
.mk-inspector-section{padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.mk-inspector-section:first-child{border-top:0}
.mk-inspector-section-title{margin-bottom:8px;color:#8fa0b8;font:700 10px/1 ui-monospace,monospace;letter-spacing:.12em}
.mk-type-panel{display:flex;flex-direction:column;gap:10px}
.mk-type-row{display:flex;flex-direction:column;gap:6px}
.mk-type-row.is-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-type-toggles{display:flex;gap:4px;flex-wrap:wrap}
.mk-type-toggle{min-width:34px;min-height:30px;padding:0 9px;border:1px solid #343841;border-radius:3px;
  background:#0c0e11;color:#9aa3b2;font:700 12px/1 ui-monospace,monospace;cursor:pointer;
  transition:color .12s ease,background .12s ease,border-color .12s ease}
.mk-type-toggle:hover{color:#e0609e;background:rgba(255,255,255,.06);border-color:#4a4f5c}
.mk-type-toggle.is-active{background:rgba(202,2,116,.18);border-color:var(--ex-accent);color:#ff8fc4}
.mk-type-toggle:focus-visible{outline:2px solid #f27db5;outline-offset:1px}
.mk-colour-field{display:flex;gap:6px;align-items:center}
.mk-colour-field input[type=color]{width:38px;height:38px;padding:2px;border:1px solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-bg);cursor:pointer;flex-shrink:0}
.mk-colour-field .mk-input{flex:1;min-width:0}
.mk-brand-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--mk-border);flex-shrink:0}
.mk-type-hint{margin:2px 0 0;color:#8fa0b8;font-size:11px;line-height:1.4}
.mk-ex-canvas-error{color:#ff9ecb;font-weight:700}
.mk-ex-visual-workspace{position:relative}
.mk-ex-drag-shield{position:absolute;inset:0;z-index:100002;background:transparent;touch-action:none}
.mk-field-wide{grid-column:1 / -1}
.mk-input-hint{display:block;margin-top:2px;color:#8fa0b8;font-size:10px;font-style:normal;font-weight:500;letter-spacing:.02em}
.mk-input-mono{font-family:var(--mk-font-mono,ui-monospace,monospace);font-size:12px}
.mk-hero-artifact-preview{display:block;border:0;background:#000}
/* Height comes from the scale frame, which fits the CONTENT (reported by
   the preview runtime) — a fixed device height here would re-introduce the
   inner scrollbar the frame exists to avoid. */
.mk-hero-artifact-preview.is-desktop{width:1440px;height:100%}
.mk-hero-artifact-preview.is-tablet{width:834px;height:100%}
.mk-hero-artifact-preview.is-mobile{width:390px;height:100%}

.mk-hero-code-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#8fa0b8;font-size:12px;font-weight:700}
.mk-hero-code-editor{width:100%;min-height:420px;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--mk-radius-md);background:#0a0f1a;color:#e6edf3;font-family:var(--mk-font-mono,ui-monospace,monospace);font-size:13px;line-height:1.6;resize:vertical;tab-size:2}
.mk-hero-code-editor:focus{outline:2px solid #f27db5;outline-offset:1px;border-color:transparent}
.mk-hero-diff-note{margin-top:10px;color:#8fa0b8;font-size:12px}

.mk-hero-build-layout,.mk-hero-history,.mk-hero-releases{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.mk-hero-build-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mk-hero-build-actions span{color:#9eacc1;font-size:12px;font-weight:700}
.mk-hero-diagnostics h4{margin:0 0 10px;font-size:15px}
.mk-hero-diagnostics{display:flex;flex-direction:column;gap:10px}
.mk-hero-diagnostic{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;border:1px solid rgba(255,255,255,.1);background:#101a2a}
.mk-hero-diagnostic code{font-family:var(--mk-font-mono,ui-monospace,monospace);font-size:12px;flex-shrink:0}
.mk-hero-diagnostic small{color:#8fa0b8;margin-left:auto;flex-shrink:0}
.mk-hero-diagnostic.is-error{border-color:rgba(248,81,73,.5);background:rgba(248,81,73,.1)}
.mk-hero-diagnostic.is-error code{color:#ffd8d6}
.mk-hero-diagnostic.is-warning{border-color:rgba(242,201,76,.5);background:rgba(242,201,76,.1)}
.mk-hero-diagnostic.is-warning code{color:#ffe9a8}

.mk-hero-build-card,.mk-hero-release-card,.mk-hero-history-item{padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:var(--mk-radius-md);background:#101a2a}
.mk-hero-build-card header,.mk-hero-release-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.mk-hero-build-card header>div,.mk-hero-release-card header>div{display:flex;align-items:center;gap:10px}
.mk-hero-build-card header span:last-child,.mk-hero-release-card>p{color:#8fa0b8;font-size:12px}
.mk-hero-release-card code{display:block;margin-top:2px;color:#8fa0b8;font-size:11px;word-break:break-all}
.mk-hero-history-item{display:flex;align-items:baseline;gap:14px}
.mk-hero-history-item>span{flex-shrink:0;color:#8fa0b8;font-size:12px;font-weight:700;text-transform:uppercase}
.mk-hero-history-item strong{display:block;font-size:13px}
.mk-hero-history-item small{color:#8fa0b8;font-size:12px}

.mk-hero-status{display:inline-flex;align-items:center;border-radius:var(--mk-radius-pill);padding:3px 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;border:1px solid var(--mk-border);background:rgba(255,255,255,.06);color:#cbd5e1}
.mk-hero-status.is-queued,.mk-hero-status.is-pending{border-color:rgba(242,201,76,.5);color:#ffe9a8;background:rgba(242,201,76,.14)}
.mk-hero-status.is-running{border-color:rgba(88,166,255,.5);color:#cfe4ff;background:rgba(88,166,255,.14)}
.mk-hero-status.is-ready,.mk-hero-status.is-passed{border-color:rgba(63,185,80,.45);color:#d5f5dc;background:rgba(63,185,80,.12)}
.mk-hero-status.is-failed,.mk-hero-status.is-cancelled{border-color:rgba(248,81,73,.5);color:#ffd8d6;background:rgba(248,81,73,.14)}

.mk-hero-checks{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.mk-hero-checks>div{display:flex;align-items:center;gap:8px;font-size:13px}
.mk-hero-checks small{margin-left:auto;color:#8fa0b8;font-size:11px;text-transform:uppercase;font-weight:700}
.mk-hero-check-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#8fa0b8}
.mk-hero-check-dot.is-passed{background:#3fb950}
.mk-hero-check-dot.is-failed{background:#f85149}
.mk-hero-check-dot.is-running,.mk-hero-check-dot.is-queued,.mk-hero-check-dot.is-pending{background:#f2c94c}

.mk-hero-empty-state{padding:24px;text-align:center;color:#8fa0b8;font-size:13px;border:1px dashed rgba(255,255,255,.14);border-radius:var(--mk-radius-md)}
.mk-hero-revision-create{display:flex;align-items:flex-end;gap:12px}
.mk-hero-revision-create .mk-field{flex:1}

.mk-hero-workspace-footer{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--ex-line);background:#050506;position:sticky;bottom:0;z-index:5}
.mk-hero-workspace-footer span{margin-left:auto;color:#8fa0b8;font-size:12px}

.mk-hero-confirm-body{display:flex;flex-direction:column;gap:14px;padding:16px}
.mk-hero-confirm-body p{margin:0;color:#aebbd0;font-size:13px;line-height:1.5}

/* Panel-width breakpoints (`@container`, keyed to `mk-hero-workspace` set
   above), not viewport media queries — see the container-type comment on
   .mk-home-hero-workspace for why: this docks into a resizable panel whose
   width is unrelated to the browser viewport. */
@container mk-hero-workspace (max-width: 900px){
  .mk-ex-visual-workspace{grid-template-columns:150px minmax(420px,1fr)}
  .mk-ex-inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--ex-line);max-height:520px}
  .mk-hero-visual-layout,.mk-hero-code-preview-layout{grid-template-columns:1fr}
  .mk-hero-editor-pane,.mk-hero-code-workspace{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .mk-hero-preview-pane{position:relative;top:auto}
}
@container mk-hero-workspace (max-width: 640px){
  .mk-hero-workspace-header{flex-direction:column;align-items:flex-start}
  .mk-hero-role-state{width:100%;justify-content:space-between}
  .mk-hero-editor-pane,.mk-hero-code-workspace,.mk-hero-preview-pane{padding:16px}
  .mk-hero-build-layout,.mk-hero-history,.mk-hero-releases{padding:16px}
   .mk-hero-workspace-footer{flex-wrap:wrap}
   .mk-hero-workspace-footer span{margin-left:0;width:100%}
  .mk-ex-document-state{display:none}.mk-ex-visual-workspace{display:flex;flex-direction:column}.mk-ex-library{border-right:0;border-bottom:1px solid var(--ex-line);max-height:260px}.mk-ex-canvas-toolbar{grid-template-columns:1fr auto}.mk-ex-canvas-status{display:none}.mk-ex-canvas-stage{min-height:430px;padding:20px 10px}.mk-ex-inspector{border-top:1px solid var(--ex-line);max-height:none}.mk-ex-element-grid{grid-template-columns:repeat(4,minmax(68px,1fr))}.mk-ex-library-section.is-structure,.mk-ex-library-note{display:none}
}

/* ── Layers panel (3-column sub-layout inside .mk-hero-editor-pane) ── */
.mk-transform-toolbar{display:flex;align-items:center;gap:4px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:#0d1521}
.mk-tool-btn{width:30px;height:30px;border-radius:6px;border:1px solid transparent;background:rgba(255,255,255,.04);color:#9eacc1;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s}
.mk-tool-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.mk-tool-btn.is-active{background:rgba(202,2,116,.2);border-color:rgba(202,2,116,.4);color:#e0609e}
.mk-tool-hint{font-size:11px;color:#6b7a91;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-layers-panel{display:flex;gap:0;height:100%;min-height:400px}
.mk-layer-list-panel{width:220px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}
.mk-layer-list-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:600;color:#9eacc1;text-transform:uppercase;letter-spacing:.5px}
.mk-layer-count{font-size:10px;color:#6b7a91}
.mk-layer-list{flex:1;overflow-y:auto;padding:4px}
.mk-layer-item{display:flex;align-items:center;gap:5px;padding:6px;border-radius:3px;cursor:pointer;font-size:11px;color:#c8d3e3;transition:background .12s}
.mk-layer-item:hover{background:rgba(255,255,255,.04)}
.mk-layer-item.is-selected{background:#1a1c21;color:#fff;box-shadow:inset 2px 0 var(--ex-accent)}
.mk-layer-item.is-builtin .mk-layer-type-icon{background:rgba(202,2,116,.15);color:#e0609e}
.mk-layer-item.is-hidden{opacity:.45}
.mk-layer-type-icon{font-size:9px;font-weight:700;width:28px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(255,255,255,.06);color:#8fa0b8;flex-shrink:0;letter-spacing:0}
.mk-layer-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-layer-toggle{min-width:24px;height:20px;background:#0c0e11;border:1px solid #343841;color:#7f8794;cursor:pointer;padding:2px 3px;font:700 7px/1 ui-monospace,monospace;border-radius:2px;flex-shrink:0}.mk-layer-toggle.is-danger{color:#ff7a85}.mk-layer-row-actions{display:none;align-items:center;gap:2px;width:100%;padding:5px 0 0 34px}.mk-layer-item.is-selected{flex-wrap:wrap}.mk-layer-item.is-selected .mk-layer-row-actions{display:flex}
.mk-layer-toggle:hover{color:#e0609e;background:rgba(255,255,255,.06)}
.mk-layer-add-row{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-top:1px solid rgba(255,255,255,.08)}
.mk-layer-inspector{flex:1;padding:16px;overflow-y:auto;min-width:0}
.mk-layer-inspector-content{display:flex;flex-direction:column;gap:12px}
.mk-layer-inspector-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mk-layer-type-badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.mk-layer-type-badge.is-builtin{background:rgba(202,2,116,.15);color:#e0609e}
.mk-layer-type-badge:not(.is-builtin){background:rgba(100,200,100,.12);color:#6cdc6c}
.mk-layer-type-name{font-size:11px;color:#6b7a91;font-family:ui-monospace,monospace}
.mk-layer-field-hint{font-size:11px;color:#6b7a91;margin:4px 0 0}
.mk-layer-typography-section{border-top:1px solid rgba(255,255,255,.06);padding-top:8px;margin-top:4px}
.mk-layer-typography-section h5{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6b7a91;margin:0 0 6px}
/* ── Guided Portfolio Case wizard ─────────────────────────────────────────
   Replaces the old block-form-based case builder end to end. The manager
   only ever sees plain chapter names; every interactive element below
   reuses the product's existing --mk-* tokens, .mk-button/.mk-input/.mk-field
   vocabulary, and the dark-navy + pink accent language already established
   by Page Studio and the Portfolio collection. */

.mk-link-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mk-color-red);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mk-link-button:hover { color: var(--mk-color-red-hover); }

.mk-case-wizard { display: flex; flex-direction: column; gap: var(--mk-space-4); }
.mk-case-wizard-loading { display: flex; align-items: center; gap: var(--mk-space-2); padding: var(--mk-space-7) 0; justify-content: center; color: var(--mk-text-muted); }

.mk-case-wizard-notfound {
  max-width: 560px;
  margin: var(--mk-space-6) auto;
  padding: var(--mk-space-5);
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-1);
  text-align: center;
}
.mk-case-wizard-notfound h2 { margin: 0 0 var(--mk-space-2); }
.mk-case-wizard-notfound p { color: var(--mk-text-muted); margin: 0 0 var(--mk-space-4); }
.mk-case-wizard-notfound-note { font-size: 0.875rem; }
.mk-case-wizard-notfound-error { color: var(--mk-danger, #d7263e); }
.mk-case-wizard-notfound-actions {
  display: flex;
  gap: var(--mk-space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--mk-space-4);
}

.mk-case-wizard-head { display: flex; flex-direction: column; gap: var(--mk-space-2); }
.mk-case-wizard-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-space-4); flex-wrap: wrap; }
.mk-case-wizard-head-row h1 { margin: 4px 0 0; font-size: 24px; line-height: 1.15; }
.mk-case-wizard-head-actions { display: flex; align-items: center; gap: var(--mk-space-3); flex-wrap: wrap; }

.mk-case-save-indicator { font-size: 12px; font-weight: 700; color: var(--mk-text-muted); white-space: nowrap; }
.mk-case-save-indicator.is-saving { color: var(--mk-text-muted); }
.mk-case-save-indicator.is-saved { color: #5fd97a; }
.mk-case-save-indicator.is-error { color: var(--mk-danger); display: inline-flex; align-items: center; gap: 6px; }

.mk-case-wizard-body { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--mk-space-5); align-items: start; }

.mk-case-rail { position: sticky; top: var(--mk-space-4); display: flex; flex-direction: column; gap: 4px; padding: var(--mk-space-2); background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); box-shadow: var(--mk-shadow-1); }
.mk-case-rail-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: flex-start;
  gap: var(--mk-space-3);
  padding: var(--mk-space-3);
  border: 0;
  border-radius: var(--mk-radius-sm);
  background: transparent;
  color: var(--mk-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.mk-case-rail-step:hover:not(:disabled) { background: var(--mk-bg-elev-2); }
.mk-case-rail-step:disabled { opacity: 0.45; cursor: not-allowed; }
.mk-case-rail-step.is-current { background: color-mix(in srgb, var(--mk-color-red) 12%, var(--mk-surface)); box-shadow: inset 0 0 0 1px rgba(215, 38, 62, 0.5); }
.mk-case-rail-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mk-bg-elev-2);
  color: var(--mk-text-muted);
  font-size: 12px;
  font-weight: 800;
}
.mk-case-rail-step.is-current .mk-case-rail-index { background: var(--mk-color-red); color: #fff; }
.mk-case-rail-step.is-done .mk-case-rail-index { background: color-mix(in srgb, #5fd97a 22%, var(--mk-bg-elev-2)); color: #5fd97a; }
.mk-case-rail-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-case-rail-copy strong { font-size: 13px; line-height: 1.3; }
.mk-case-rail-copy small { font-size: 11px; color: var(--mk-text-muted); }

/* Left column: the step rail plus the scoped mini preview stacked under it. */
.mk-case-rail-column { display: flex; flex-direction: column; gap: var(--mk-space-3); position: sticky; top: var(--mk-space-4); }
.mk-case-rail-column .mk-case-rail { position: static; top: auto; }

.mk-case-mini-preview { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mk-case-mini-preview-empty {
  padding: var(--mk-space-3);
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  color: var(--mk-text-muted);
  font-size: 12px;
  text-align: center;
}
.mk-case-mini-preview-expand {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: #030714;
  cursor: zoom-in;
  overflow: hidden;
  box-shadow: var(--mk-shadow-1);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mk-case-mini-preview-expand:hover,
.mk-case-mini-preview-expand:focus-visible {
  border-color: var(--mk-color-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-color-red) 25%, transparent);
}
.mk-case-mini-preview-frame { position: relative; display: block; overflow: hidden; margin: 0 auto; }
.mk-case-mini-preview-scaler { position: absolute; top: 0; left: 0; pointer-events: none; }
.mk-case-mini-preview-scaler iframe { display: block; width: 100%; height: 100%; border: 0; background: #050816; pointer-events: none; }
.mk-case-mini-preview-hint { margin: 0; font-size: 11px; color: var(--mk-text-muted); text-align: center; }
.mk-case-mini-preview-hint kbd {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  border: 1px solid var(--mk-border);
  border-radius: 4px;
  background: var(--mk-bg-elev-2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

/* Fullscreen chapter preview — a device-accurate render (real pixel width,
   so real breakpoints fire) scaled with one transform to always fit the
   viewport, however large or small it is. */
.mk-case-fullscreen-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(3, 6, 14, 0.94);
  backdrop-filter: blur(6px);
}
.mk-case-fullscreen-preview-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-4);
  padding: var(--mk-space-3) var(--mk-space-4);
}
.mk-case-fullscreen-preview-close {
  margin-left: var(--mk-space-2);
  width: 36px;
  height: 36px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.mk-case-fullscreen-preview-close:hover { border-color: var(--mk-color-red); color: var(--mk-color-red); }
.mk-case-fullscreen-preview-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 var(--mk-space-4) var(--mk-space-4); }
.mk-case-fullscreen-preview-frame {
  /* width/height/transform are set inline per-device+viewport in Rust
     (see render_fullscreen_preview) — CSS can't reliably turn a
     vw-vs-px comparison into the unitless number transform:scale() needs. */
  border-radius: 12px;
  overflow: hidden;
  background: #050816;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  flex: 0 0 auto;
}
.mk-case-fullscreen-preview-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.mk-case-panel { min-width: 0; display: flex; flex-direction: column; gap: var(--mk-space-4); }

.mk-case-chapter {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-4);
  padding: var(--mk-space-5);
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-1);
}
.mk-case-chapter h2 { margin: 0; font-size: 20px; }
.mk-case-chapter-why { margin: -8px 0 0; color: var(--mk-text-muted); }
.mk-case-hint { margin: 0; font-size: 12px; color: var(--mk-text-muted); line-height: 1.5; }

.mk-case-ai-button { align-self: flex-start; }

.mk-case-chapter-issues {
  margin: 0;
  padding: var(--mk-space-3) var(--mk-space-4);
  border: 1px solid rgba(248, 81, 73, 0.4);
  border-radius: var(--mk-radius-sm);
  background: rgba(248, 81, 73, 0.08);
  color: var(--mk-text);
  font-size: 13px;
  list-style: disc;
  padding-left: calc(var(--mk-space-4) + 14px);
}
.mk-case-chapter-issues li { margin: 2px 0; }

.mk-case-confirm {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--mk-space-2) var(--mk-space-4);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.mk-case-confirm:hover { border-color: var(--mk-focus); }
.mk-case-confirm.is-confirmed { background: color-mix(in srgb, #5fd97a 18%, var(--mk-bg-elev-2)); border-color: #5fd97a; color: #5fd97a; }

.mk-case-step-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-3); padding-top: var(--mk-space-2); }
.mk-case-step-nav-start { justify-content: flex-end; }
.mk-case-step-count { color: var(--mk-text-muted); font-size: 12px; font-weight: 700; }

.mk-case-list-field { display: flex; flex-direction: column; gap: var(--mk-space-2); }
.mk-case-list-row { display: flex; align-items: center; gap: var(--mk-space-2); }
.mk-case-list-row .mk-input { flex: 1; }
.mk-case-color-row { align-items: center; }
.mk-input-color { width: 40px; height: 36px; padding: 2px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: var(--mk-bg-elev); cursor: pointer; }

.mk-case-persona-row, .mk-case-scope-row {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-2);
  padding: var(--mk-space-3);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  background: var(--mk-bg-elev);
}
.mk-case-persona-head, .mk-case-scope-head { display: flex; align-items: center; gap: var(--mk-space-2); }
.mk-case-persona-head .mk-input, .mk-case-scope-head .mk-input { flex: 1; }

/* ── Media step ── */
.mk-media-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mk-space-4); }
.mk-media-slot { display: flex; flex-direction: column; gap: var(--mk-space-2); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); overflow: hidden; background: var(--mk-bg-elev); }
.mk-media-slot-preview { position: relative; width: 100%; background: var(--mk-bg-elev-2); display: grid; place-items: center; overflow: hidden; }
.mk-media-slot-preview img, .mk-media-slot-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-media-slot-empty { color: var(--mk-text-muted); font-size: 12px; }
.mk-media-slot-body { display: flex; flex-direction: column; gap: 6px; padding: var(--mk-space-3); }
.mk-media-slot-body strong { font-size: 13px; }
.mk-media-slot-actions { display: flex; gap: var(--mk-space-2); flex-wrap: wrap; }

.mk-media-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mk-space-3); }
.mk-media-gallery-item { display: flex; flex-direction: column; gap: 6px; padding: var(--mk-space-2); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: var(--mk-bg-elev); }
.mk-media-gallery-item .mk-media-slot-preview { border-radius: var(--mk-radius-sm); }

.mk-case-media-video { display: flex; flex-direction: column; gap: var(--mk-space-3); padding-top: var(--mk-space-2); border-top: 1px solid var(--mk-border); }

.mk-font-slot { gap: var(--mk-space-2); }
.mk-font-slot-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: var(--mk-bg-elev); font-size: 12px; color: var(--mk-text-muted); width: fit-content; }

.mk-userflow-field { gap: var(--mk-space-2); }
.mk-userflow-preview { margin-top: var(--mk-space-2); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: #0a0a12; padding: var(--mk-space-3); }
.mk-userflow-preview-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mk-text-muted); margin-bottom: var(--mk-space-2); }
.mk-userflow-preview-svg { width: 100%; height: auto; display: block; }
.mk-userflow-preview--empty { margin-top: var(--mk-space-2); padding: var(--mk-space-4); border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); color: var(--mk-text-muted); font-size: 13px; text-align: center; }

/* ── Review / languages / preview / publish ── */
.mk-case-review { gap: var(--mk-space-5); }
.mk-case-locale-block { display: flex; flex-direction: column; gap: var(--mk-space-2); padding: var(--mk-space-3) 0; border-top: 1px solid var(--mk-border); }
.mk-case-locale-block:first-of-type { border-top: 0; padding-top: 0; }
.mk-case-locale-block h3 { margin: 0; font-size: 15px; }
.mk-case-locale-checklist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mk-case-locale-checklist li { display: flex; align-items: center; gap: var(--mk-space-2); font-size: 13px; color: var(--mk-text-muted); }
.mk-case-locale-checklist li.is-done { color: var(--mk-text); }
.mk-case-locale-checklist li span:first-child { width: 18px; text-align: center; color: #5fd97a; }
.mk-case-locale-checklist li.is-done span:first-child { font-weight: 800; }
.mk-case-locale-actions { display: flex; gap: var(--mk-space-2); flex-wrap: wrap; }

.mk-case-preview { display: flex; flex-direction: column; gap: var(--mk-space-2); }
.mk-case-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-3); flex-wrap: wrap; }
.mk-case-preview-locales, .mk-case-preview-devices { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: var(--mk-bg-elev); }
.mk-case-preview-tab { min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--mk-radius-pill); background: transparent; color: var(--mk-text-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.mk-case-preview-tab.is-active { background: var(--mk-color-red); color: #fff; }
.mk-case-preview-frame { position: relative; overflow: auto; background: #030714; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); display: flex; justify-content: center; padding: var(--mk-space-4); }
.mk-case-preview-frame iframe { display: block; width: 1440px; height: 900px; border: 0; border-radius: 8px; background: #050816; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42); pointer-events: none; }
.mk-case-preview-frame.is-mobile iframe { width: 390px; height: 844px; }
.mk-case-preview-shield { position: absolute; inset: var(--mk-space-4); border-radius: 8px; }

.mk-case-readiness-summary { padding: var(--mk-space-3) var(--mk-space-4); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: var(--mk-bg-elev); }
.mk-case-readiness-summary strong { display: block; margin-bottom: 6px; }
.mk-case-readiness-summary ul { margin: 0; padding-left: 18px; color: var(--mk-text-muted); font-size: 13px; }

.mk-case-publish-button { align-self: flex-start; min-width: 240px; }
.mk-case-published { align-items: flex-start; }

/* ── In-app guide ── */
.mk-case-guide-body { display: flex; flex-direction: column; gap: var(--mk-space-4); max-width: 760px; }
.mk-case-guide-section { padding: var(--mk-space-4) var(--mk-space-5); background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); box-shadow: var(--mk-shadow-1); }
.mk-case-guide-section h2 { margin: 0 0 var(--mk-space-2); font-size: 16px; }
.mk-case-guide-section ul { margin: 0; padding-left: 20px; color: var(--mk-text-muted); line-height: 1.6; }
.mk-case-guide-section li { margin: 4px 0; }

@media (max-width: 880px) {
  .mk-case-wizard-body { grid-template-columns: 1fr; }
  .mk-case-rail { position: relative; top: auto; flex-direction: row; overflow-x: auto; gap: 6px; }
  .mk-case-rail-step { grid-template-columns: 24px 1fr; min-width: 168px; flex: 0 0 auto; }
  .mk-case-preview-frame { padding: var(--mk-space-2); }
}

@media (max-width: 640px) {
  .mk-case-wizard-head-row { flex-direction: column; align-items: stretch; }
  .mk-case-wizard-head-actions { justify-content: space-between; }
  /* Only the top-level Continue/Back nav (a direct child of the panel)
     should pin to the bottom on mobile. The "Start this case" nav is
     nested inside the Basics chapter card itself; pinning it too made it
     float mid-screen over the Category/Year fields while scrolling. */
  .mk-case-panel > .mk-case-step-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(var(--mk-space-5) * -1) calc(var(--mk-space-5) * -1);
    padding: var(--mk-space-3) var(--mk-space-5);
    background: var(--mk-surface);
    border-top: 1px solid var(--mk-border);
  }
  .mk-case-chapter { padding: var(--mk-space-4); }
  .mk-case-publish-button { width: 100%; }
  .mk-case-rail-step { min-height: 44px; }
  .mk-button, .mk-button-secondary, .mk-case-confirm { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-case-rail-step, .mk-case-confirm, .mk-link-button { transition: none; }
}

@media (max-width:1200px){
  .mk-layers-panel{flex-direction:column}
  .mk-layer-list-panel{width:100%;border-right:0;border-bottom:1px solid rgba(255,255,255,.1);max-height:200px}
}

/* ── Integrations: OVH connections / available domains ───────────────── */

.pm-domains-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mk-space-1, 4px);
}

.pm-domain-row {
  display: flex;
  align-items: center;
  padding: var(--mk-space-2, 8px) var(--mk-space-3, 12px);
  background: var(--mk-surface, #fff);
  border: 1px solid var(--mk-border, #e3e6e0);
  border-radius: 12px;
  font-family: var(--mk-font-mono, ui-monospace, monospace);
  font-size: 14px;
}

/* ── Sites: deploy dialog ───────────────────────────────────────────── */

.pm-header-actions { display: flex; gap: 8px; align-items: center; }

.pm-deploy-dialog { width: min(640px, 96vw); }
.pm-deploy-dialog form { padding: 16px; display: grid; gap: 12px; overflow-y: auto; }
.pm-deploy-preview { margin: 0; font-size: 14px; color: var(--mk-text-2, #555); }
.pm-deploy-preview code { background: var(--mk-bg-elev, #f2f2f2); padding: 2px 8px; border-radius: 8px; }
.pm-deploy-detail { margin: 4px 0 0; font-size: 13px; opacity: .8; }

/* ── Sites: domain rows on site cards ──────────────────────────────── */

.pm-site-domains { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pm-site-domains li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-site-domain { font-family: var(--mk-font-mono, ui-monospace, monospace); font-size: 13px; }
.pm-site-domain-primary { font-weight: 600; }
.pm-domain-action { padding: 2px 10px !important; font-size: 12px !important; min-height: 26px !important; }

/* ── Brand book editor ─────────────────────────────────────────────── */

.mk-brandbook { max-width: 980px; }
.mk-brandbook .pm-header-settings-card { max-width: none; }

.mk-brandbook .mk-bb-hint { margin: 0 0 12px; font-size: 13px; }

.mk-bb-color-row {
  display: grid;
  grid-template-columns: 44px 1fr 2fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.mk-bb-row-side { display: flex; align-items: center; gap: 8px; }
.mk-bb-hex, .mk-bb-token { font-size: 12px; color: var(--mk-text-2, #6b7280); white-space: nowrap; }

.mk-bb-grid { display: grid; gap: 8px; align-items: center; margin-bottom: 8px; }
.mk-bb-grid.is-fonts { grid-template-columns: 1fr 1fr auto; }
.mk-bb-grid.is-scale { grid-template-columns: 1fr 90px 90px 90px auto; }
.mk-bb-grid.is-forbidden { grid-template-columns: 44px 1fr auto; }
.mk-bb-grid.is-rules { grid-template-columns: 140px 1fr 130px auto; }

.mk-bb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.mk-bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--mk-border, #d1d5db);
  border-radius: 999px;
  font-size: 12px;
}
.mk-bb-chip code { font-size: 12px; }
.mk-bb-chip-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.mk-brandbook input[type="color"].mk-bb-add-swatch {
  min-width: 34px !important;
  width: 34px !important;
  min-height: 30px !important;
  height: 30px !important;
  border: 1px dashed var(--mk-border, #d1d5db);
  border-radius: 8px;
  cursor: pointer;
}

.mk-bb-x {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--mk-text-2, #9ca3af);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
}
.mk-bb-x:hover { color: var(--mk-color-red, #dc2626); }

.mk-bb-inline { display: flex; gap: 16px; flex-wrap: wrap; }
.mk-bb-inline > div { min-width: 120px; }
.mk-bb-inline > .mk-bb-wide { flex: 1; min-width: 220px; }

@media (max-width: 640px) {
  .mk-bb-grid.is-scale { grid-template-columns: 1fr 60px 60px 60px auto; }
  .mk-bb-grid.is-rules { grid-template-columns: 90px 1fr 110px auto; }
}

/* ── User flow graph ─────────────────────────────────────────────────── */
.mk-user-flow{display:flex;flex-direction:column;gap:16px}
.mk-flow-canvas{position:relative;overflow:auto;border:1px solid var(--ex-line,#2a2f3a);border-radius:12px;background:
  radial-gradient(circle at 1px 1px, rgba(161,167,179,.14) 1px, transparent 0) 0 0/22px 22px, #14171e}
.mk-flow-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mk-flow-edge{fill:none;stroke:#2FB979;stroke-opacity:.55;stroke-width:1.6}
.mk-flow-edge.is-broken{stroke:#B9433F;stroke-opacity:.9;stroke-dasharray:5 4}
.mk-flow-node{position:absolute;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--ex-line,#2a2f3a);
  border-radius:10px;background:#1b1f28;cursor:grab;user-select:none;touch-action:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mk-flow-node:active{cursor:grabbing}
.mk-flow-node header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mk-flow-node header strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-flow-node code{color:var(--ex-dim,#8a90a0);font:600 10px/1 ui-monospace,monospace}
.mk-flow-node footer{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ex-dim,#8a90a0);font-size:10px}
.mk-flow-status{font:700 8px/1 ui-monospace,monospace;text-transform:uppercase;color:#F2C14E;border:1px solid rgba(242,193,78,.35);border-radius:999px;padding:3px 7px}
.mk-flow-node.is-published .mk-flow-status{color:#2FB979;border-color:rgba(47,185,121,.4)}
.mk-flow-chrome,.mk-flow-external{background:#161a22;border-style:dashed;cursor:default}
.mk-flow-broken{border:1px solid rgba(185,67,63,.4);border-radius:10px;padding:12px 16px;background:rgba(185,67,63,.08)}
.mk-flow-broken h2{margin:0 0 8px;font-size:14px}
.mk-flow-broken ul{margin:0;padding-left:18px;font-size:12px;color:var(--ex-muted,#c6cad4)}
.mk-link-picker select + select,.mk-link-picker select + input{margin-top:6px}
.mk-link-broken{color:#B9433F}

/* ── Scene editor (Ф2.1): form-based authoring on frozen contracts ── */
.mk-scene-editor{display:flex;flex-direction:column;gap:10px;min-height:0}
.mk-scene-toolbar{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(22,122,75,.25);border-radius:10px;background:rgba(22,122,75,.06)}
.mk-scene-state{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#425149}
.mk-scene-dirty{color:#B9433F}
.mk-scene-conflict{font-size:12px;color:#B9433F;border:1px solid rgba(185,67,63,.4);border-radius:8px;padding:6px 10px;background:rgba(185,67,63,.08)}
.mk-scene-spacer{flex:1}
.mk-scene-empty{padding:32px;text-align:center;color:#425149}
.mk-scene-hint{font-size:12px;color:#425149;max-width:46ch}
.mk-scene-columns{display:grid;grid-template-columns:240px 1fr 260px;gap:10px;min-height:0}
.mk-scene-layers,.mk-scene-inspector{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px;overflow:auto;max-height:70vh;background:rgba(0,0,0,.18)}
.mk-scene-layer{margin-bottom:8px}
.mk-scene-layer header{display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#c6cad4;padding:4px 0}
.mk-scene-toggle{background:none;border:none;color:#2FB979;cursor:pointer;font-size:14px;padding:2px 6px}
.mk-scene-object{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:8px;padding:6px 8px;margin:2px 0;cursor:pointer;color:inherit;font-size:12px}
.mk-scene-object.is-selected{border-color:#2FB979;background:rgba(47,185,121,.12)}
.mk-scene-object-kind{color:#2FB979;font-size:10px;text-transform:uppercase}
.mk-scene-object-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-scene-add{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.mk-scene-preview{display:flex;align-items:flex-start;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:repeating-conic-gradient(#1a1d21 0 25%,#14161a 0 50%) 50%/16px 16px;min-height:0}
.mk-scene-canvas{max-width:100%;height:auto;border-radius:8px}
.mk-scene-props{display:flex;flex-direction:column;gap:8px}
.mk-scene-prop-kind{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#2FB979}
.mk-scene-prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mk-scene-field{display:flex;flex-direction:column;gap:3px;font-size:11px;color:#c6cad4}
.mk-scene-field input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:inherit;padding:6px 8px;font-size:13px}
.mk-scene-field input:focus-visible{outline:2px solid #2FB979;outline-offset:1px}
/* Scene preview needs an intrinsic height when the host workspace's grid
   does not stretch it (services page studio embeds the block editor in a
   narrower column): the canvas is fixed 960×640 and would collapse. */
.mk-scene-preview{min-height:320px;align-items:center;padding:8px}
.mk-scene-order{display:inline-flex;flex-direction:column;margin-left:auto}
.mk-scene-order-btn{background:none;border:none;color:#8b949e;cursor:pointer;font-size:11px;line-height:1;padding:1px 4px}
.mk-scene-order-btn:hover{color:#2FB979}
.mk-scene-object{flex:1}
.mk-scene-layer li{display:flex;align-items:center;gap:4px}
.mk-scene-prop-actions{display:flex;gap:8px;flex-wrap:wrap}
.mk-scene-field select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:inherit;padding:6px 8px;font-size:13px}

/* ── Ф3.7 hierarchy UI ── */
.mk-scene-groupbar{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px;flex-wrap:wrap}
.mk-scene-group-hint{font-size:11px;color:#8b949e;flex:1;min-width:12ch}
.mk-scene-version{font-size:11px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.2);color:#8b949e}
.mk-scene-version.is-v2{color:#2FB979;border-color:#2FB979}
.mk-scene-row{display:flex;align-items:center;gap:4px;width:100%}
.mk-scene-collapse{background:none;border:none;color:#2FB979;cursor:pointer;font-size:12px;line-height:1;padding:1px 4px;min-width:16px}
.mk-scene-collapse:disabled{color:#42514b;cursor:default}
.mk-scene-collapse-spacer{display:inline-block;width:16px}
.mk-scene-object.in-multi{border-color:#F2C14E;background:rgba(242,193,78,.14)}
.mk-scene-object.is-hidden{opacity:.45}
.mk-scene-node-group>.mk-scene-row .mk-scene-object-kind{color:#F2C14E}
.mk-scene-reparent{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px dashed rgba(255,255,255,.18);border-radius:8px;margin:6px 0}
.mk-scene-field select{width:100%}

/* ─── Portfolio listing-card bar (Page Studio, portfolio_detail pages) ───
   Pinned above the studio grid; edits portfolio_projects.settings.card
   which drives the public /portfolio grid card for this case. */
.mk-card-bar {
    border-bottom: 1px solid var(--mk-border, rgba(255,255,255,.10));
    background: rgba(202, 2, 116, 0.06);
}
.mk-card-bar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.mk-card-bar-toggle:hover { background: rgba(202, 2, 116, 0.10); }
.mk-card-bar-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.mk-card-bar-saved {
    margin-left: auto;
    color: #4BE4DB;
    font-size: 12px;
}
.mk-card-bar-body {
    display: grid;
    gap: 12px;
    padding: 4px 18px 16px;
}
.mk-card-bar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mk-card-bar-error { color: #ff6b81; font-size: 12px; }
.mk-card-bar-hint { color: rgba(255,255,255,.45); font-size: 12px; }

/* SEO bar additions: tab row, checkboxes, og-image thumb */
.mk-card-bar-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.mk-card-bar-tabs .mk-card-bar-toggle { width: auto; }
.mk-card-bar-toggle.is-open { background: rgba(202, 2, 116, 0.10); }
.mk-card-bar-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}
.mk-card-bar-check input { margin-top: 3px; }
.mk-card-bar-check span { display: grid; }
.mk-card-bar-check small { color: rgba(255,255,255,.45); }
.mk-card-bar-thumb {
    width: 160px;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background: rgba(0,0,0,.25);
}
.mk-card-bar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-card-bar-thumb em { color: rgba(255,255,255,.4); font-size: 11px; font-style: normal; }

/* Listing-card image picker field */
.mk-card-image-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.mk-card-image-thumb {
    flex: 0 0 auto;
    width: 128px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
}
.mk-card-image-thumb em {
    font-size: 10px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-card-image-actions {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    align-items: center;
    flex: 1;
}
.mk-card-image-url { min-width: 0; }