: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); }
/* Generic shape-driven props form (AutoPropsForm) — notes, nested fieldsets,
   repeater rows, read-only JSON degradations. */
.mk-auto-props-note { margin: 4px 0 10px; color: var(--mk-text-muted); font-size: 11px; line-height: 1.4; }
.mk-auto-props-notice { padding: 8px 10px; border: 1px solid rgba(215,38,62,.35); border-radius: var(--mk-radius-md); background: color-mix(in srgb, var(--mk-color-red) 6%, var(--mk-surface)); }
.mk-auto-props-fieldset { margin: 10px 0; padding: 10px 12px 12px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(255,255,255,.02); }
.mk-auto-props-fieldset legend { padding: 0 6px; color: var(--mk-text); font-size: 11px; font-weight: 700; }
.mk-auto-props-row { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; padding: 8px; border: 1px dashed var(--mk-border); border-radius: var(--mk-radius-md); }
.mk-auto-props-row-body { flex: 1 1 auto; min-width: 0; }
.mk-auto-props-readonly { max-height: 220px; overflow: auto; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: rgba(0,0,0,.25); color: var(--mk-text-muted); font-size: 10px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.mk-form-error { margin: 6px 0 0; color: #ff8b9d; font-size: 11px; }

.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: edited from the chapter strip in the editor
   panel head (see .mk-chapter-strip in the studio section) ——— */
.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);
}



@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);
  }
}


/* ── 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; }

/* ── Page Studio AI (add-block menu, wizard, structure panel) ─────────── */
.mk-block-type-card-present {
  flex:none; padding:2px 6px; border-radius:999px;
  background:color-mix(in srgb,var(--mk-color-accent,#7ab648) 14%,transparent);
  color:color-mix(in srgb,var(--mk-color-accent,#7ab648) 82%,var(--mk-text));
  font-size:9px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.mk-ai-suggest { margin:0 0 10px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--mk-color-accent,#7ab648) 34%,var(--mk-border)); border-radius:6px; background:color-mix(in srgb,var(--mk-color-accent,#7ab648) 6%,var(--mk-bg-elev)); }
/* Opt-in trigger: AI loads ONLY on click, never automatically (2026-09-08). */
.mk-ai-suggest-trigger { margin:0 0 10px; }
.mk-ai-suggest-head { display:block; color:var(--mk-text-muted); font-size:10px; }
.mk-ai-suggest-head strong { display:block; margin-bottom:1px; color:var(--mk-text); font-size:11px; }
.mk-ai-suggest.is-loading .mk-ai-suggest-head::after { content:""; display:inline-block; width:34px; height:6px; margin-left:8px; vertical-align:middle; border-radius:3px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mk-color-accent,#7ab648) 55%,transparent),transparent); background-size:200% 100%; animation:mk-ai-shimmer 1.1s linear infinite; }
@keyframes mk-ai-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.mk-ai-suggest-list { display:grid; gap:4px; margin-top:6px; }
.mk-ai-suggest-card { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; text-align:left; border:1px solid var(--mk-border); border-left:2px solid color-mix(in srgb,var(--mk-color-accent,#7ab648) 60%,var(--mk-border)); border-radius:4px; background:var(--mk-bg-elev); cursor:pointer; }
.mk-ai-suggest-card:hover,.mk-ai-suggest-card:focus-visible { border-color:color-mix(in srgb,var(--mk-color-accent,#7ab648) 55%,var(--mk-border)); outline:0; }
.mk-ai-suggest-card-copy { min-width:0; }
.mk-ai-suggest-card-copy strong { display:block; color:var(--mk-text); font-size:12px; line-height:1.2; }
.mk-ai-suggest-card-copy small { display:block; margin-top:2px; overflow:hidden; color:var(--mk-text-muted); font-size:10px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.mk-ai-suggest-card.is-on-page { opacity:.72; }
.mk-block-editor-toolbar-actions { display:flex; align-items:center; gap:6px; }
.mk-ai-note-ok { color:color-mix(in srgb,var(--mk-color-accent,#7ab648) 80%,var(--mk-text)); }
.mk-ai-note-err { color:var(--mk-text-muted); }
.mk-ai-field-hints { margin:0 0 8px; padding:8px 10px; border:1px dashed color-mix(in srgb,var(--mk-color-accent,#7ab648) 40%,var(--mk-border)); border-radius:6px; }
.mk-ai-field-hints-head { margin:0 0 6px; color:var(--mk-text); font-size:11px; font-weight:600; }
.mk-ai-field-hint { display:flex; gap:8px; align-items:baseline; padding:3px 0; font-size:11px; line-height:1.35; }
.mk-ai-field-hint code { flex:none; color:var(--mk-text-muted); font-size:10px; }
.mk-ai-field-hint span { color:var(--mk-text); }
.mk-ai-order { margin:0 0 8px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--mk-color-accent,#7ab648) 34%,var(--mk-border)); border-radius:6px; background:color-mix(in srgb,var(--mk-color-accent,#7ab648) 6%,var(--mk-bg-elev)); font-size:11px; }
.mk-ai-order.is-loading { color:var(--mk-text-muted); }
.mk-ai-order.is-error { border-color:color-mix(in srgb,var(--mk-color-red) 40%,var(--mk-border)); background:color-mix(in srgb,var(--mk-color-red) 5%,var(--mk-bg-elev)); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mk-ai-order-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.mk-ai-order-head strong { color:var(--mk-text); font-size:11px; }
.mk-ai-order-head > div { display:flex; gap:6px; }
.mk-ai-order-move { display:flex; gap:8px; align-items:baseline; padding:2px 0; line-height:1.3; }
.mk-ai-order-move code { flex:none; color:var(--mk-text-muted); font-size:10px; }
.mk-ai-order-move span { color:var(--mk-text); }
.mk-ai-order-note { display:block; margin-top:6px; color:var(--mk-text-muted); font-size:10px; }
.mk-page-blocks-head-actions { display:flex; align-items:center; gap:6px; }
.mk-block-list-divider { display:flex; justify-content:center; height:0; position:relative; z-index:2; }
.mk-block-list-divider button { width:22px; height:22px; margin-top:-11px; display:none; align-items:center; justify-content:center; padding:0; border:1px dashed color-mix(in srgb,var(--mk-color-accent,#7ab648) 60%,var(--mk-border)); border-radius:999px; background:var(--mk-bg-elev); color:var(--mk-text-muted); font-size:12px; line-height:1; cursor:pointer; }
.mk-block-list-divider:hover button,.mk-block-list-divider button:focus-visible { display:flex; }
.mk-block-fill-bar { flex:none; width:34px; height:4px; overflow:hidden; border-radius:2px; background:color-mix(in srgb,var(--mk-text-muted) 24%,transparent); }
.mk-block-fill-bar > span { display:block; height:100%; border-radius:2px; background:color-mix(in srgb,var(--mk-color-accent,#7ab648) 78%,var(--mk-text)); }
.mk-block-fill-bar.is-low > span { background:color-mix(in srgb,var(--mk-color-red) 66%,var(--mk-text)); }
/* ── end Page Studio AI ───────────────────────────────────────────────── */
.mk-lc-card-actions { display:none; align-items:center; gap:2px; flex:none; }
.mk-lc-card:hover .mk-lc-card-actions,.mk-lc-card:focus-within .mk-lc-card-actions { display:flex; }

/* ── Studio primary-language switcher ──────────────────────────────────── */
.mk-locale-switch { display:inline-flex; align-items:center; gap:3px; padding:2px 6px 2px 2px; border:1px solid var(--mk-border); border-radius:6px; background:var(--mk-bg-elev); }
.mk-locale-switch-label { padding:0 4px; color:var(--mk-text-muted); font-size:9px; font-weight:700; letter-spacing:.06em; }
.mk-locale-chip { position:relative; min-width:30px; padding:3px 7px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--mk-text-muted); font-size:10px; font-weight:600; letter-spacing:.03em; cursor:pointer; transition:background-color var(--mk-duration-fast),color var(--mk-duration-fast),border-color var(--mk-duration-fast); }
.mk-locale-chip:hover { color:var(--mk-text); background:color-mix(in srgb,var(--mk-text-muted) 12%,transparent); }
.mk-locale-chip.is-active { border-color:color-mix(in srgb,var(--mk-color-accent,#7ab648) 55%,var(--mk-border)); background:color-mix(in srgb,var(--mk-color-accent,#7ab648) 14%,transparent); color:var(--mk-text); }
.mk-locale-chip.is-missing { border-style:dashed; }
.mk-locale-chip.is-missing:not(.is-active) { color:color-mix(in srgb,var(--mk-text-muted) 72%,transparent); }

/* ── Listing card: AI "fill from language" row ─────────────────────────── */
.mk-card-translate-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 10px; }
.mk-card-translate-row .mk-input { width:auto; min-width:130px; flex:0 1 auto; }
.mk-card-translate-label { color:var(--mk-text-muted); font-size:10px; font-weight:700; letter-spacing:.04em; }
.mk-card-translate-note { color:var(--mk-text-muted); font-size:11px; }
.mk-locale-chip-primary-dot { display:inline-block; width:4px; height:4px; margin-left:4px; vertical-align:middle; border-radius:999px; background:var(--mk-color-accent,#7ab648); }
.mk-locale-chip.is-active .mk-locale-chip-primary-dot { background:color-mix(in srgb,var(--mk-color-accent,#7ab648) 82%,var(--mk-text)); }
/* ── end language switcher ─────────────────────────────────────────────── */
/* ── Add-block catalog: static selfcheck baseline thumbnails ───────────── */
/* (replaces the retired live hover-popup system, 2026-09-08) */
.mk-block-type-card-thumb { display:block; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--mk-border); border-radius:8px; background:var(--mk-bg-elev-2); margin:0 0 8px; }
.mk-block-type-card-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.mk-block-type-category-curated strong { color:var(--mk-color-accent,#7ab648); }

/* ── Add-block hover inspection: big frozen-baseline screenshot ─────────── */
.mk-block-shot-popup { position:fixed; top:82px; right:24px; z-index:100004; width:min(680px,calc(100vw - 520px)); min-width:420px; padding:12px; border:1px solid var(--mk-border); border-top:2px solid var(--mk-color-accent,#7ab648); border-radius:12px; background:var(--mk-bg-elev); box-shadow:0 30px 90px rgba(0,0,0,.48); pointer-events:none; }
.mk-block-shot-popup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:2px 2px 10px; }
.mk-block-shot-popup-head span { display:block; color:var(--mk-color-accent,#7ab648); font-size:9px; font-weight:900; letter-spacing:.16em; }
.mk-block-shot-popup-head strong { display:block; margin-top:3px; color:var(--mk-text-strong); font-size:16px; }
.mk-block-shot-popup-head code { color:var(--mk-text-muted); font-size:10px; }
.mk-block-shot-popup img { display:block; width:100%; aspect-ratio:1440/900; object-fit:contain; border:1px solid var(--mk-border); border-radius:8px; background:var(--mk-bg-elev-2); }
.mk-block-shot-popup-foot { padding:9px 2px 0; color:var(--mk-text-muted); font-size:9px; font-weight:700; letter-spacing:.04em; }
@media (max-width:1100px) { .mk-block-shot-popup { right:14px; width:min(600px,calc(100vw - 380px)); min-width:0; } }
@media (max-width:760px) { .mk-block-shot-popup { 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; min-height:0; overflow:hidden; }
/* The picker's grid must scroll INSIDE the modal. The legacy scroll rule
   lives on .mk-media-grid, but the current markup renders .pm-media-grid —
   without this scoped rule the grid grows to full content height (~3000px),
   spills past the modal, and the positioned .pm-media-card thumbnails paint
   over the static modal head/foot, stealing clicks from the footer buttons.
   grid-auto-rows: Firefox sizes auto rows to min-content once the grid box
   height is definite, collapsing the aspect-ratio thumbs to 0px. */
.mk-media-picker-main .pm-media-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-auto-rows: max-content;
}
/* Defense in depth: keep the modal chrome above any positioned grid content. */
.mk-media-picker .mk-modal-head,
.mk-media-picker .mk-modal-foot {
  position: relative;
  z-index: 1;
}
.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); cursor:zoom-in; }
.mk-media-field-thumb:hover { border-color:var(--mk-accent, #d7263e); }
.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); cursor:zoom-in; }
.mk-media-field-empty:hover { border-color:var(--mk-accent, #d7263e); }
.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}

/* ── 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(380px, 540px) minmax(0, 1fr); 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; }
/* Two-stage add-block wizard: hint line, selected-type header (Configure
   stage), and the BFF-rendered preview pane states. */
.mk-add-block-hint {
    margin: 2px 0 10px;
    color: var(--mk-text-muted);
    font-size: 11px;
    line-height: 1.4;
}
.mk-add-block-selected-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: color-mix(in srgb, var(--mk-color-red) 6%, var(--mk-surface));
}
.mk-add-block-selected-copy { flex: 1 1 auto; min-width: 0; }
.mk-add-block-selected-copy strong { display: block; color: var(--mk-text); font-size: 13px; }
.mk-add-block-selected-copy small { display: block; margin-top: 2px; color: var(--mk-text-muted); font-size: 10px; line-height: 1.35; }
.mk-add-block-selected-head code {
    flex: none;
    max-width: 130px;
    overflow: hidden;
    color: var(--mk-text-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mk-block-type-result-desc {
    display: block;
    margin: -2px 0 8px;
    color: var(--mk-text-muted);
    font-size: 10px;
    line-height: 1.35;
}
.mk-block-type-card-icon {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 5px;
    border: 1px solid rgba(215,38,62,.45);
    border-radius: 4px;
    color: var(--mk-color-red);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    vertical-align: 1px;
}
.mk-block-preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: rgba(255,255,255,.55);
    font-size: 11px;
}
/* Host-preview stage: the site iframe sits underneath; until the host
   acks, an opaque mask covers it (a site without the host route shows its
   404 page underneath — never user-visible). */
.mk-block-preview-stage { position: relative; height: 100%; }
.mk-block-preview-stage iframe { display: block; }
.mk-block-preview-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #050816;
    color: rgba(255,255,255,.55);
    font-size: 11px;
}
/* Live debug strip (bottom of the popup viewport): which mode/flags the
   two-tier preview is in — makes stuck states diagnosable at a glance. */
.mk-block-preview-debug {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    padding: 2px 8px;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.65);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    line-height: 1.4;
    pointer-events: none;
}
/* Renderer boot timeline (cc-dbg beacons): the full shell→wasm→host→render
   chain, visible on one line — one screenshot diagnoses any break. */
.mk-block-preview-timeline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 2px 8px;
    background: rgba(0,0,0,.7);
    color: rgba(180,220,255,.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.mk-block-preview-error {
    padding: 14px;
    color: #ff8b9d;
    font-size: 11px;
    line-height: 1.45;
    background: rgba(215,38,62,.12);
}
.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; }

.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 {
  position: relative;
  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;
}

/* ── Dark Page Studio ──────────────────────────────────────────────────────
   The whole Page Studio — topbar, panel chrome, drawers, pinned bars,
   pop-out windows — lives in the always-dark EX.FRONT language so the
   ExFront workspaces mounted inside the editor panel stop looking foreign.
   The rest of the admin stays light. Re-scoping the shared tokens here
   (instead of overriding every rule) keeps shared components
   (.mk-button/.mk-input/.pm-field) correctly contrasted, exactly like the
   case-hero editor scope below does. */
/* Page Studio fills the content column edge to edge. */
.pm-admin-main:has(> .mk-studio-root) {
  max-width: none;
  padding: 14px;
}

.mk-studio-root {
  color-scheme: dark;
  --mk-color-red: #e0447e;
  --mk-color-red-hover: #f0568f;
  --mk-color-white: #ffffff;
  --mk-danger: #ff6b6b;
  --mk-success: #5fd97a;
  --mk-bg: #080d1a;
  --mk-bg-elev: #101a30;
  --mk-bg-elev-2: #16223e;
  --mk-bg-hover: #1c2a4a;
  --mk-surface: #101a30;
  --mk-text: #f5f2f7;
  --mk-text-muted: #aab3c4;
  --mk-border: rgba(255, 255, 255, 0.14);
  --mk-focus: #f2c94c;
  --mk-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --mk-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45);
  min-height: calc(100vh - 56px - 28px);
  background:
    radial-gradient(1100px 420px at 18% -8%, rgba(224, 68, 126, 0.08), transparent 60%),
    var(--mk-bg);
  color: var(--mk-text);
}

/* Studio device switcher (the one shared control) ------------------------ */
.mk-studio-device-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-bg-elev);
}
.mk-studio-device-switch .mk-studio-device-option {
  min-height: 28px;
  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: 700;
  cursor: pointer;
  transition: background var(--mk-duration-fast) var(--mk-ease-standard),
    color var(--mk-duration-fast) var(--mk-ease-standard);
}
.mk-studio-device-switch .mk-studio-device-option:hover {
  color: var(--mk-text);
}
.mk-studio-device-switch .mk-studio-device-option.is-active {
  background: var(--mk-color-red);
  color: #fff;
}

/* Listing-card drawer section (unified card + SEO) ------------------------ */
.mk-drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mk-drawer-section-head strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mk-text-muted);
}
.mk-field .mk-field-hint,
.mk-field small.mk-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--mk-text-muted);
}

/* Live card preview inside the drawer: mirrors the public SSR card. */
.mk-card-live-preview {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--mk-border);
  border-radius: 10px;
  background: var(--mk-bg);
  max-width: 430px;
}

/* Live runtime card preview (production home_portfolio release in a srcdoc
   iframe) — pinned side variant hosts it full height; the frame paints its
   own dark site canvas, so no extra chrome beyond a subtle border. */
.mk-card-runtime-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: 560px;
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  background: #000415;
}
.mk-card-runtime-frame.is-booting {
  opacity: 0.55;
}
.mk-card-live-preview-inline .mk-card-runtime-frame {
  height: 480px;
}

/* Listing-card tag chips (portfolio projects): authored in the Listing & SEO
   drawer, rendered by the collection runtime both as image overlay and body
   rows. */
.mk-tag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  background: var(--mk-bg-elev-1, var(--mk-bg));
  min-height: 34px;
}
.mk-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mk-color-red) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mk-color-red) 45%, transparent);
  color: var(--mk-text, inherit);
  white-space: nowrap;
}
.mk-tag-chip-x {
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.6;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
}
.mk-tag-chip-x:hover {
  opacity: 1;
}
.mk-tag-chip-input {
  flex: 1 1 90px;
  min-width: 70px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  outline: none;
  padding: 2px 0;
}

/* CaseHero surfaces: Text / Visual / Advanced are projections of one
   draft state — the tab strip switches only the controls column; the live
   preview pane stays mounted on every surface (parity by construction).
   (User model: Design=release canvas tab, Content=this whole form,
   Configure=add-block wizard stage — labels kept distinct on purpose.) */
.mk-case-hero-surfaces {
  display: flex;
  gap: 4px;
  margin: 10px 16px 0;
  border-bottom: 1px solid var(--mk-border, rgba(255, 255, 255, 0.12));
}
.mk-case-hero-surface-tab {
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.55;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.mk-case-hero-surface-tab.is-active {
  opacity: 1;
  border-bottom-color: var(--mk-color-red, #e63329);
}
.mk-case-hero-editor-grid.is-visual {
  /* Visual surface: preview-first (visual controls left, big live preview). */
  grid-template-columns: minmax(280px, 2fr) 3fr;
}
.mk-case-hero-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
}


.mk-card-live-preview .pm-case-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--mk-bg-elev-2);
  border: 1px solid var(--mk-border);
}
.mk-card-live-preview .pm-case-card.is-wide {
  outline: 1px dashed color-mix(in srgb, var(--mk-color-red) 50%, transparent);
  outline-offset: 3px;
}
.mk-card-live-preview .pm-case-card-cover {
  background: var(--mk-bg-hover);
}
.mk-card-live-preview .pm-case-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mk-card-live-preview .pm-case-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-card-live-preview .pm-case-card-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pm-card-accent, var(--mk-color-red));
  border: 1px solid var(--pm-card-accent, var(--mk-color-red));
  border-radius: 999px;
  padding: 1px 8px;
}
.mk-card-live-preview .pm-case-card-body h3 {
  margin: 0;
  font-size: 15px;
  color: var(--mk-text);
}
.mk-card-live-preview .pm-case-card-body p {
  margin: 0;
  font-size: 12px;
  color: var(--mk-text-muted);
}

/* Two placements of the live card preview, switched at the studio's narrow
   breakpoint (1100px): on wide viewports the preview pins to the LEFT of the
   open Listing & SEO drawer — above the scrim, outside the scrolling body —
   so it never scrolls away while card fields are edited; below the
   breakpoint the inline copy inside the drawer body takes over. */
.mk-app-control .mk-card-side-preview {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(min(560px, 94vw) + 24px);
  transform: translateY(-50%);
  width: 360px;
  margin-top: 0;
  box-shadow: var(--mk-shadow-2);
  /* The cover img's natural width exceeds the 360px box and used to
     overflow onto the drawer panel, intercepting clicks there — clip it.
     The preview's own locale chips stay interactive. */
  overflow: hidden;
}
.mk-app-control .mk-card-side-preview-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mk-text-muted);
}
@media (max-width: 1099px) {
  .mk-app-control .mk-card-side-preview { display: none; }
}
@media (min-width: 1100px) {
  .mk-app-control .mk-card-live-preview-inline { display: none; }
}

/* ExFront shared rails (studio chrome for the embedded workspace) —
   visible only while a slot's panels portal into them. */
.mk-exfront-rail,
.mk-exfront-toolbar-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.mk-exfront-rail:empty,
.mk-exfront-toolbar-rail:empty,
.mk-exfront-rail-body:empty {
  display: none;
}
.mk-exfront-rail-body {
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: var(--mk-bg-elev);
  overflow: auto;
  min-height: 0;
}
.mk-exfront-toolbar-rail {
  flex-direction: row;
  align-items: center;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mk-surface) 92%, transparent);
}

/* 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;
}

/* Autosave pill states + the structure-commit button. */
.mk-app-control .pm-save-state.is-saving { color: var(--mk-text-muted); }
.mk-app-control .pm-save-state.is-error {
  color: #ff6b6b;
  font-weight: 800;
}
.mk-app-control .mk-studio-apply-structure {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk-color-red) 55%, transparent);
}
.mk-app-control .mk-studio-apply-structure:not(:disabled):hover {
  background: var(--mk-color-red-hover);
}
.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; }

/* Selection-sync pulse: a brief glow outline fired when a block is selected
   from the other panel (tree↔preview bidirectional sync). Self-clearing via
   the `is-pulse` class lifetime in page_editor.rs. */
@keyframes mk-block-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mk-color-red) 70%, transparent); }
  35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mk-color-red) 25%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.mk-block-list-item.is-pulse,
.mk-preview-section.is-pulse,
.mk-lc-card.is-pulse {
  animation: mk-block-pulse 1.6s ease-out 1;
  position: relative;
}
.mk-preview-section.is-pulse {
  border-radius: 10px;
}
.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; }

/* ── Case chapter strip ────────────────────────────────────────────────
   Portfolio case pages only: compact, collapsible control under the
   "Block / <type> / Block N of M" head. Works for every editor surface
   (classic form, ExFront workspace, CaseHeroEditor). */
.mk-app-control .mk-chapter-strip {
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-bg-elev);
}
.mk-app-control .mk-chapter-strip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mk-text-muted);
  font-size: 12px;
  text-align: left;
}
.mk-app-control .mk-chapter-strip-head:hover { color: var(--mk-text); }
.mk-app-control .mk-chapter-strip.is-set .mk-chapter-strip-head { color: var(--mk-text); }
.mk-app-control .mk-chapter-chip {
  flex: 0 0 auto;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--mk-border);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mk-font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mk-app-control .mk-chapter-strip.is-set .mk-chapter-chip {
  border-color: rgba(215, 38, 62, 0.45);
  color: #ff8fa0;
}
.mk-app-control .mk-chapter-strip-title { flex: 1 1 auto; min-width: 0; }
.mk-app-control .mk-chapter-strip-caret {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
  color: var(--mk-text-muted);
}
.mk-app-control .mk-chapter-strip-caret.is-open { transform: rotate(180deg); }
.mk-app-control .mk-chapter-strip-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 12px;
}
.mk-app-control .mk-chapter-strip-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--mk-text-muted);
}

/* ── Slot surface switch (Design | Content) ────────────────────────────
   Live-content slot blocks get a first-class fill-in tab next to the
   release workspace — same content editors the workspace's Content popup
   embeds. */
.mk-app-control .mk-block-editor-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.mk-app-control .mk-slot-mode-tabs {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  padding: 8px 14px 0;
}
.mk-app-control .mk-block-editor .mk-slot-mode-tabs { padding: 10px 14px 0; }
.mk-app-control .mk-slot-mode-tab {
  flex: 1 1 0;
  padding: 7px 10px;
  border: 1px solid var(--mk-border);
  border-bottom: 0;
  border-radius: var(--mk-radius-sm) var(--mk-radius-sm) 0 0;
  background: rgba(255, 255, 255, 0.02);
  color: var(--mk-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.mk-app-control .mk-slot-mode-tab:hover { color: var(--mk-text); }
.mk-app-control .mk-slot-mode-tab.active {
  background: var(--mk-bg-elev);
  color: var(--mk-text);
  border-color: var(--mk-border);
}

/* Preview surface toggle (Live / Wireframe) -------------------------------- */
.mk-studio-surface-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-bg-elev);
}
.mk-studio-surface-switch button {
  min-height: 28px;
  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: 700;
  cursor: pointer;
}
.mk-studio-surface-switch button.is-active {
  background: var(--mk-bg-elev-2);
  color: var(--mk-text);
  box-shadow: inset 0 0 0 1px var(--mk-border);
}

/* Wireframe surface stage: the layout canvas inside the preview pane. */
.mk-page-wireframe-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--mk-space-3);
}

/* Retired workspace modes: the studio is one permanent three-pane layout
   (blocks | editor | preview); the surface toggle inside the preview
   toolbar swaps the live iframe for the wireframe canvas. */

/* 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;
}
/* Pop-out windows carry the dark studio scope on their shell; the studio
   root's content-area height calc doesn't apply to a standalone window. */
.mk-studio-root.mk-panel-window-shell {
  min-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;
}

/* Section-page CMS draft preview: no device frame — the stage itself is the
   scroll container, so the whole draft stays reachable (the old fixed-height
   overflow-hidden frame clipped everything below the fold and left
   scroll-into-view with nothing the user could actually scroll). */
.mk-app-control .mk-page-browser-preview--cms {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #47404c transparent;
}

.mk-app-control .mk-page-browser-preview--cms .mk-section-cms-preview {
  width: 100%;
  min-height: 60vh;
}

.mk-app-control .mk-page-browser-preview--cms .mk-section-cms-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  text-align: center;
}

.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;
  }

  /* Narrow single-panel mode is driven by the Rust-side container check
     (`is-narrow-workspace` + `is-narrow-panel-*`), not by the viewport:
     the studio column width depends on the sidebar, not the window. */
  .mk-app-control .mk-page-studio.is-narrow-workspace {
    display: block;
    width: 100%;
  }

  .mk-app-control .mk-page-studio.is-narrow-workspace > .mk-page-blocks-panel,
  .mk-app-control .mk-page-studio.is-narrow-workspace > .mk-page-live-preview,
  .mk-app-control .mk-page-studio.is-narrow-workspace > .mk-page-editor-panel {
    display: none;
    position: relative;
    top: auto;
    max-height: none;
  }

  .mk-app-control .mk-page-studio.is-narrow-workspace.is-narrow-panel-blocks .mk-page-blocks-panel {
    display: flex;
  }

  .mk-app-control .mk-page-studio.is-narrow-workspace.is-narrow-panel-preview .mk-page-live-preview {
    display: flex;
    flex-direction: column;
  }

  .mk-app-control .mk-page-studio.is-narrow-workspace.is-narrow-panel-editor .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;
  }
}

/* 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-visual-section,
.mk-simple-asset-preview,
.mk-simple-video-thumb {
  --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;container-type:inline-size;container-name:ex-canvas}.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}
/* Narrow canvas (Page Studio's editor panel can be 440px): the toolbar's
   auto tracks never shrink, so the selectors cluster slid under the
   inspector and swallowed clicks. Below ~760px of CANVAS width (a
   container query — the viewport is irrelevant here) the toolbar stacks
   into rows and the status line yields its space. */
@container ex-canvas (max-width: 760px) {
    .mk-ex-canvas-toolbar { grid-template-columns: 1fr; gap: 6px; }
    .mk-ex-canvas-status { display: none; }
    .mk-ex-canvas-selectors { flex-wrap: wrap; }
}
.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}

/* Mobile touch-target sizing (kept from the retired case-wizard block). */
@media (max-width: 640px) {
  .mk-button, .mk-button-secondary { min-height: 44px; }
}

@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; }

/* ── ExFront block preview focus ─────────────────────────────────────
   This is deliberately bounded by the Block editor, not the browser.
   The existing iframe stays mounted while all authoring chrome disappears. */
.mk-home-hero-workspace.is-preview-expanded {
    /* In-flow flex item capped by the editor body (which caps via the
       panel's definite expanded height). The stage then scrolls a tall
       artifact internally instead of the workspace growing past the
       panel and being clipped with no scrollbar anywhere. */
    position: relative;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #000;
}
.mk-home-hero-workspace.is-preview-expanded > :not(.mk-ex-visual-workspace):not(.mk-ex-preview-restore),
.mk-home-hero-workspace.is-preview-expanded .mk-ex-visual-workspace > :not(.mk-ex-canvas-column),
.mk-home-hero-workspace.is-preview-expanded .mk-ex-canvas-column > :not(.mk-ex-canvas-stage),
.mk-home-hero-workspace.is-preview-expanded .mk-ex-canvas-axis,
.mk-home-hero-workspace.is-preview-expanded .mk-ex-selection-overlay,
.mk-home-hero-workspace.is-preview-expanded .mk-ex-hover-box,
.mk-home-hero-workspace.is-preview-expanded .mk-ex-guide,
.mk-home-hero-workspace.is-preview-expanded .mk-ex-motion-badges {
    display: none !important;
}
.mk-home-hero-workspace.is-preview-expanded .mk-ex-visual-workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.mk-home-hero-workspace.is-preview-expanded .mk-ex-canvas-column {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #000;
}
.mk-home-hero-workspace.is-preview-expanded .mk-ex-canvas-stage {
    min-height: 0;
    padding: 0;
    overflow: auto;
    background: #000;
    background-image: none;
    overscroll-behavior: contain;
}
.mk-home-hero-workspace.is-preview-expanded .mk-ex-canvas-stage .mk-hero-preview-scale-wrap {
    border: 0;
    box-shadow: none;
}
/* Expanded preview needs one DEFINITE height in the chain — every box in
   the docked studio sizes from content with only max-height caps. Fix the
   panel at its own max-height cap; body and workspace then cap via
   flex + min-height:0 and the stage owns the scrolling. */
.mk-app-control .mk-page-editor-panel:has(.mk-home-hero-workspace.is-preview-expanded) {
    height: calc(100vh - 88px);
}
.mk-app-control .mk-page-editor-body:has(> .mk-home-hero-workspace.is-preview-expanded) {
    display: flex;
    min-height: 0;
    overflow: hidden;
}
.mk-app-control .mk-page-editor-body > .mk-home-hero-workspace.is-preview-expanded {
    flex: 1 1 auto;
    min-height: 0;
}
.mk-ex-preview-expand,
.mk-ex-preview-restore {
    border: 1px solid var(--ex-line);
    background: var(--ex-panel-2);
    color: var(--ex-muted);
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .08em;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.mk-ex-preview-expand:hover { color: #fff; }
.mk-ex-preview-expand:focus-visible,
.mk-ex-preview-restore:focus-visible {
    outline: 2px solid #ff8fc4;
    outline-offset: 2px;
}
.mk-ex-preview-restore {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 6;
    min-height: 44px;
    padding: 0 14px;
    border-color: rgba(255,255,255,.4);
    background: #090a0c;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.42);
}
.mk-ex-preview-restore:hover {
    border-color: #fff;
    background: #17191e;
}

/* ── Embedded mode (exfront-place unified page workspace) ──────────
   The workspace is one block of a page: chrome hides, panels live in
   the host's rails through portals, the canvas is the only inline
   surface. */
.mk-home-hero-workspace.is-embedded {
    min-height: 0;
    height: auto;
    overflow: visible;
}
.mk-home-hero-workspace.is-embedded .mk-hero-workspace-header,
.mk-home-hero-workspace.is-embedded .mk-hero-workspace-footer {
    display: none;
}
.mk-home-hero-workspace.is-embedded > .mk-ex-visual-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow: visible;
}
.mk-home-hero-workspace.is-embedded .mk-ex-canvas-column {
    overflow: visible;
}
.mk-home-hero-workspace.is-embedded .mk-ex-canvas-stage {
    min-height: 520px;
}
/* Portaled panels land in host rails: stretch to the rail's width and
   let the rail own scrolling. */
.mk-ex-library,
.mk-ex-inspector {
    min-height: 0;
}
/* Layer-tree group toggle: the branch glyph is now a real button —
   ▾ expanded / ▸ collapsed; clicking folds the whole subtree. */
.mk-ex-tree .mk-layer-tree-branch.is-toggle {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ex-muted);
    font: 700 10px/1 ui-monospace, monospace;
    cursor: pointer;
}
.mk-ex-tree .mk-layer-tree-branch.is-toggle:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.mk-ex-tree .mk-layer-tree-branch.is-toggle.is-collapsed {
    color: var(--ex-accent);
}

/* ── Superlayer context menu (workspace sections popup) ─────────────
   The ROOT layer row is the block point; right-click opens the block's
   sections (Visual/Content/Scene/…) here instead of the removed tab
   rail. Backdrop eats outside clicks and swallows other contextmenus. */
.mk-superlayer-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
}
.mk-superlayer-menu {
    position: fixed;
    z-index: 3001;
    min-width: 190px;
    padding: 6px;
    background: #0d0e11;
    border: 1px solid var(--ex-line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .65);
}
.mk-superlayer-menu-head {
    padding: 7px 10px 9px;
    color: var(--ex-dim);
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .14em;
    border-bottom: 1px solid var(--ex-line-soft);
    margin-bottom: 5px;
}
.mk-superlayer-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--ex-muted);
    font: 700 11px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.mk-superlayer-menu-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.mk-superlayer-menu-item.is-active {
    color: #fff;
    box-shadow: inset 2px 0 0 var(--ex-accent);
    background: rgba(202,2,116,.12);
}
.mk-superlayer-menu-item em {
    color: var(--ex-accent);
    font-style: normal;
    font-size: 8px;
    letter-spacing: .14em;
}
.mk-layer-item.mk-superlayer { cursor: context-menu; }

/* ── Floating section window ─────────────────────────────────────── */
.mk-section-popup-layer {
    position: fixed;
    inset: 0;
    z-index: 2900;
    pointer-events: none;
}
.mk-section-popup {
    position: fixed;
    display: grid;
    grid-template-rows: 38px minmax(0, 1fr);
    min-width: min(440px, calc(100vw - 16px));
    min-height: min(320px, calc(100vh - 16px));
    overflow: hidden;
    pointer-events: auto;
    color: var(--ex-text);
    background: #08090b;
    border: 1px solid #434852;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .72);
}
.mk-section-popup-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 7px 0 11px;
    border-bottom: 1px solid var(--ex-line);
    background: #111318;
    cursor: move;
    user-select: none;
    touch-action: none;
}
.mk-section-popup-head .mk-eyebrow {
    color: var(--ex-dim);
    font-size: 7px;
    letter-spacing: .12em;
}
.mk-section-popup-head > strong {
    overflow: hidden;
    color: #fff;
    font: 700 11px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.mk-section-popup-head .mk-icon-btn {
    width: 26px;
    height: 26px;
    min-height: 0;
}
.mk-section-popup-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.mk-section-popup-body .mk-hero-editor-pane,
.mk-section-popup-body .mk-hero-code-workspace,
.mk-section-popup-body .mk-hero-build-layout,
.mk-section-popup-body .mk-hero-history,
.mk-section-popup-body .mk-hero-releases {
    padding: 14px;
}
.mk-section-popup-body .mk-hero-code-preview-layout,
.mk-section-popup-body .mk-hero-visual-layout {
    grid-template-columns: minmax(0, 1fr);
}
.mk-section-popup-body .mk-hero-code-workspace,
.mk-section-popup-body .mk-hero-editor-pane {
    border-right: 0;
    border-bottom: 1px solid var(--ex-line-soft);
}
.mk-section-popup-body .mk-hero-preview-pane {
    position: relative;
    top: auto;
    padding: 14px;
}
.mk-section-popup-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: linear-gradient(135deg, transparent 48%, #555c68 49% 56%, transparent 57% 66%, #8a929f 67% 74%, transparent 75%);
    cursor: nwse-resize;
    touch-action: none;
}
.mk-section-popup-resize:focus-visible {
    outline: 1px solid var(--ex-accent);
    outline-offset: -3px;
}
@media (max-width: 560px) {
    .mk-section-popup-head .mk-eyebrow { display: none; }
    .mk-section-popup-head { grid-template-columns: 1fr auto; }
}

/* Canvas SOURCE switch (DRAFT/LIVE), sits directly above the preview. */
.mk-ex-canvas-mode{display:flex;align-items:center;gap:6px;min-height:34px;padding:5px 10px;border-bottom:1px solid var(--ex-line);background:#07080a}
.mk-ex-canvas-mode-label{color:var(--ex-dim);font:700 8px/1 ui-monospace,monospace;letter-spacing:.12em}
.mk-ex-canvas-mode button{min-width:52px;height:26px;border:1px solid var(--ex-line);background:#0d0f12;color:var(--ex-muted);font:700 9px/1 ui-monospace,monospace;letter-spacing:.08em;cursor:pointer}
.mk-ex-canvas-mode button:first-of-type{border-radius:3px 0 0 3px;border-right:0}
.mk-ex-canvas-mode button:last-of-type{border-radius:0 3px 3px 0}
.mk-ex-canvas-mode button.is-active{background:var(--ex-accent);color:#fff;border-color:var(--ex-accent)}
.mk-ex-canvas-mode-note{color:var(--ex-dim);font:italic 400 9px/1 ui-monospace,monospace;opacity:.8}

/* ─── Layout containers: block list affordances ─────────────────────────── */
.mk-app-control .mk-block-list-item.is-container {
  border-left: 3px solid var(--mk-accent, #CA0274);
}
.mk-app-control .mk-block-list-item.is-drop-before {
  box-shadow: inset 0 2px 0 var(--mk-accent, #CA0274);
}
.mk-app-control .mk-block-list-item.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--mk-accent, #CA0274);
}
.mk-app-control .mk-block-list-item.is-drop-into {
  outline: 2px dashed var(--mk-accent, #CA0274);
  outline-offset: -2px;
}

/* ─── Layout canvas (wireframe surface of the preview pane) ──────────────── */
.mk-layout-canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mk-bg-elev);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  overflow: hidden;
}
.mk-layout-canvas-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mk-border);
}
.mk-layout-canvas-head small { color: var(--mk-text-muted); }
.mk-layout-canvas-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mk-lc-row {
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  padding: 10px;
  background: color-mix(in srgb, var(--mk-surface) 60%, transparent);
}
.mk-lc-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mk-lc-row-head code { color: var(--mk-text-muted); font-size: 11px; }
.mk-lc-preset { max-width: 200px; font-size: 12px; }
.mk-lc-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--mk-color-red) 16%, transparent);
  color: var(--mk-color-red);
}
.mk-lc-row-grid { display: flex; gap: 12px; align-items: stretch; }
.mk-lc-cell { display: flex; min-width: 0; }
.mk-lc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px dashed var(--mk-border);
  border-radius: 8px;
  padding: 8px;
  min-width: 0;
}
.mk-lc-col-head { display: flex; }
.mk-lc-col-empty { align-items: center; justify-content: center; color: var(--mk-text-muted); }
.mk-lc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--mk-border);
  background: var(--mk-bg-elev-2);
  cursor: grab;
}
.mk-lc-card.is-dragging { opacity: 0.5; }
/* Live drop hints: edge rails for Before/After, ring for Into. */
.mk-lc-card.is-hover-before::before,
.mk-lc-card.is-hover-after::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 3px;
  background: var(--mk-color-red);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mk-color-red) 60%, transparent);
}
.mk-lc-card.is-hover-before::before { top: -2px; }
.mk-lc-card.is-hover-after::before { bottom: -2px; }
.mk-lc-card.is-hover-into,
.mk-lc-dropzone.is-hover {
  outline: 2px dashed color-mix(in srgb, var(--mk-color-red) 70%, transparent);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--mk-color-red) 8%, var(--mk-bg-elev-2));
}
.mk-lc-card-copy { display: flex; flex-direction: column; min-width: 0; }
.mk-lc-card-copy strong { font-size: 12px; }
.mk-lc-card-copy code { font-size: 10px; color: var(--mk-text-muted); }
.mk-lc-dropzone {
  border: 1px dashed var(--mk-border);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  color: var(--mk-text-muted);
  transition: background var(--mk-duration-fast) var(--mk-ease-standard),
    outline-color var(--mk-duration-fast);
}
.mk-lc-dropzone small { font-size: 10px; }
/* Side zone appended to a row grid: a narrow "new column" target. */
.mk-lc-colzone-side {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
}
.mk-lc-colzone-side small { transform: rotate(180deg); }

/* ============================================================
   Media library — folder tree, chips, bulk bar, dropzone,
   upload queue, inspector additions (shared browser + picker)
   ============================================================ */

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

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

/* ── Folder tree ─────────────────────────────────────────── */

.pm-media-tree {
  display: grid;
  gap: 2px;
}

.pm-media-tree-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--mk-text);
  cursor: pointer;
  user-select: none;
}

.pm-media-tree-row:hover {
  background: var(--mk-bg-elev);
}

.pm-media-tree-row.active {
  background: var(--mk-bg-elev);
  border-color: var(--mk-color-red);
}

.pm-media-tree-row.drop-target {
  border: 1px dashed var(--mk-color-red);
  background: rgba(184, 0, 105, 0.06);
}

.pm-media-tree-icon {
  display: inline-flex;
  color: var(--mk-text-muted);
  flex: none;
}

.pm-media-tree-row.active .pm-media-tree-icon {
  color: var(--mk-color-red);
}

.pm-media-tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.pm-media-tree-count {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mk-bg-elev);
  color: var(--mk-text-muted);
  font-size: 11px;
  font-weight: 650;
}

.pm-media-tree-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex: none;
}

.pm-media-tree-row:hover .pm-media-tree-actions {
  display: inline-flex;
}

.pm-media-tree-row:hover .pm-media-tree-count {
  display: none;
}

.pm-media-tree-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mk-text-muted);
  cursor: pointer;
}

.pm-media-tree-action:hover {
  background: var(--mk-surface);
  color: var(--mk-text);
}

.pm-media-tree-action-danger:hover {
  color: var(--mk-color-red);
}

.pm-media-tree-input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
}

.pm-media-tree-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px dashed var(--mk-border);
  border-radius: 8px;
  background: transparent;
  color: var(--mk-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pm-media-tree-new:hover {
  border-color: var(--mk-focus);
  color: var(--mk-text);
}

.pm-media-tree-error {
  margin: 8px 2px 0;
  color: var(--mk-color-red);
  font-size: 12px;
}

/* ── Layout main column, dropzone ────────────────────────── */

.pm-media-main {
  position: relative;
  min-width: 0;
  border-radius: 11px;
}

.pm-media-main.dropzone-active {
  outline: 2px dashed var(--mk-focus);
  outline-offset: 4px;
}

.pm-dropzone-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  gap: 4px;
  justify-items: center;
  border-radius: 11px;
  background: rgba(239, 237, 241, 0.92);
  color: var(--mk-text);
  pointer-events: none;
}

.pm-dropzone-overlay span {
  color: var(--mk-text-muted);
  font-size: 13px;
}

.pm-dropzone-overlay-picker {
  background: rgba(239, 237, 241, 0.95);
}

.mk-media-picker-main.dropzone-active {
  outline: 2px dashed var(--mk-focus);
  outline-offset: 2px;
}

/* ── Type chips ──────────────────────────────────────────── */

.pm-media-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.pm-media-chip {
  padding: 5px 12px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: var(--mk-surface);
  color: var(--mk-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.pm-media-chip:hover {
  border-color: var(--mk-focus);
  color: var(--mk-text);
}

.pm-media-chip.active {
  border-color: var(--mk-color-red);
  background: rgba(184, 0, 105, 0.07);
  color: var(--mk-color-red);
}

/* ── Bulk bar / select toggle ────────────────────────────── */

.pm-media-select-toggle.is-active {
  border-color: var(--mk-color-red);
  color: var(--mk-color-red);
}

.pm-media-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--mk-color-red);
  border-radius: 10px;
  background: rgba(184, 0, 105, 0.05);
}

.pm-media-bulkbar strong {
  font-size: 13px;
  color: var(--mk-color-red);
}

.pm-media-bulk-move {
  width: auto;
  min-width: 200px;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

/* ── Card selection + type previews ──────────────────────── */

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

.pm-media-check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 6px;
  background: rgba(36, 28, 40, 0.55);
  color: #fff;
  cursor: pointer;
}

.pm-media-check.checked {
  background: var(--mk-color-red);
  border-color: var(--mk-color-red);
}

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

.pm-media-type-icon {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  color: #5a626e;
}

.pm-media-type-icon small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7a828e;
}

/* ── Load more ───────────────────────────────────────────── */

.pm-media-loadmore {
  display: grid;
  justify-items: center;
  margin-top: 14px;
}

/* ── Upload queue ────────────────────────────────────────── */

.pm-upload-queue {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--mk-border);
  border-radius: 11px;
  background: var(--mk-surface);
}

.pm-upload-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pm-upload-queue-head strong {
  font-size: 13px;
}

.pm-upload-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--mk-border);
  font-size: 12.5px;
}

.pm-upload-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-upload-item-state {
  color: var(--mk-text-muted);
  white-space: nowrap;
}

.pm-upload-item.done .pm-upload-item-state {
  color: #1a7f37;
}

.pm-upload-item.failed .pm-upload-item-state {
  color: var(--mk-color-red);
}

.pm-upload-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--mk-bg-elev);
  overflow: hidden;
}

.pm-upload-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mk-color-red);
  transition: width 120ms linear;
}

.pm-upload-bar.indeterminate > span {
  display: none;
}

.pm-upload-bar.indeterminate {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--mk-bg-elev) 0%,
    var(--mk-bg-elev) 40%,
    rgba(184, 0, 105, 0.5) 50%,
    var(--mk-bg-elev) 60%,
    var(--mk-bg-elev) 100%
  );
  background-size: 200% 100%;
  animation: pm-upload-slide 1.1s linear infinite;
}

@keyframes pm-upload-slide {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* ── Inspector additions ─────────────────────────────────── */

.pm-media-inspector > .pm-field {
  margin-bottom: 10px;
}

.pm-media-inspector-move {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

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

.pm-media-usage {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--mk-border);
  border-radius: 9px;
  background: var(--mk-bg-elev);
  font-size: 12.5px;
}

.pm-media-usage-title {
  margin-bottom: 6px;
  font-weight: 650;
}

.pm-media-usage ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-media-usage li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pm-media-usage-kind {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mk-surface);
  color: var(--mk-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-media-usage-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mk-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pm-media-usage-free {
  margin: 4px 0 10px;
  color: #1a7f37;
  font-size: 12.5px;
}

.pm-media-usage-loading {
  margin: 4px 0 10px;
  color: var(--mk-text-muted);
  font-size: 12.5px;
}

.pm-media-inspector-note {
  margin: 0 0 10px;
  color: #1a7f37;
  font-size: 12.5px;
}

.pm-media-inspector-preview video,
.pm-media-inspector-preview audio {
  width: 100%;
}

/* ── Responsive ──────────────────────────────────────────── */

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

  .pm-media-sidebar {
    position: static;
  }
}

/* ── Image families (rendition sets: png source + webp/avif, hero/left/wide,
   locale pairs) ─────────────────────────────────────────────────────────── */

.pm-media-card.has-family::before,
.pm-media-card.has-family::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 10px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  background: var(--mk-surface);
  z-index: -1;
  transition: transform var(--mk-duration-fast) var(--mk-ease-standard);
}

.pm-media-card.has-family::after {
  left: 8px;
  right: 8px;
  bottom: -8px;
}

.pm-media-card.has-family:hover::before {
  transform: translate(2px, -2px);
}

.pm-media-card.has-family:hover::after {
  transform: translate(4px, -4px);
}

.pm-media-card.has-family {
  margin-bottom: 10px;
}

.pm-media-family-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(36, 28, 40, 0.78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Inspector family strip */

.pm-media-family {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--mk-border);
  border-radius: 9px;
  background: var(--mk-bg-elev);
}

.pm-media-family-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--mk-text-muted);
}

.pm-media-family-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.pm-media-family-member {
  display: grid;
  gap: 4px;
  width: 84px;
  padding: 0;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  background: var(--mk-surface);
  cursor: pointer;
  font: inherit;
}

.pm-media-family-member:hover {
  border-color: var(--mk-focus);
}

.pm-media-family-member.current {
  border-color: var(--mk-color-red);
  box-shadow: 0 0 0 2px rgba(184, 0, 105, 0.18);
}

.pm-media-family-thumb {
  display: block;
  width: 100%;
  height: 56px;
  background: #f4f2f6;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
}

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

.pm-media-family-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 4px 5px;
}

.pm-media-family-ext {
  color: var(--mk-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pm-media-family-source {
  padding: 0 4px;
  border-radius: 4px;
  background: #1a7f37;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ─── Self-check tab (frozen baselines) ─────────────────────────────── */

.mk-selfcheck {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 30px;
  min-height: 100%;
}

.mk-selfcheck-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mk-selfcheck-topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mk-selfcheck-topbar-title h1 {
  margin: 0;
  font-size: 20px;
}

.mk-selfcheck-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mk-selfcheck-muted { color: var(--mk-muted, #8b8b85); font-size: 12px; }
.mk-selfcheck-error { color: var(--mk-down, #f85149); font-size: 13px; }

.mk-selfcheck-skeleton {
  height: 320px;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 40%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 60%);
  background-size: 200% 100%;
  animation: mk-selfcheck-shimmer 1.4s infinite linear;
}

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

/* status pills */
.mk-selfcheck-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: inherit;
  background: transparent;
}

.mk-selfcheck-pill.is-ok { color: var(--mk-success, #3fb950); border-color: rgba(63,185,80,.45); background: rgba(63,185,80,.08); }
.mk-selfcheck-pill.is-regression, .mk-selfcheck-pill.is-missing, .mk-selfcheck-pill.is-error {
  color: #ff6b64; border-color: rgba(248,81,73,.55); background: rgba(248,81,73,.10);
}
.mk-selfcheck-pill.is-refreeze { color: #f2c94c; border-color: rgba(242,201,76,.45); background: rgba(242,201,76,.08); }
.mk-selfcheck-pill.is-candidate {
  color: #f2c94c; border-color: rgba(242,201,76,.45); background: rgba(242,201,76,.08);
  animation: mk-selfcheck-pulse 1.8s ease-in-out infinite;
}
.mk-selfcheck-pill.is-stale { color: #d9b38c; border-color: rgba(217,179,140,.4); background: rgba(217,179,140,.07); }
.mk-selfcheck-pill.is-unfrozen { color: var(--mk-muted, #8b8b85); border-color: rgba(139,139,133,.35); }
.mk-selfcheck-pill.is-selected { outline: 2px solid rgba(247,247,245,.65); outline-offset: 1px; cursor: default; }

@keyframes mk-selfcheck-pulse {
  50% { background: rgba(242,201,76,.18); }
}

/* columns */
.mk-selfcheck-columns {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

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

/* column 1: pages */
.mk-selfcheck-pages {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 72vh;
  overflow-y: auto;
  padding-right: 4px;
}

.mk-selfcheck-search { margin-bottom: 6px; }

.mk-selfcheck-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
}

.mk-selfcheck-page:hover { background: rgba(255,255,255,.05); }
.mk-selfcheck-page.is-active { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }

.mk-selfcheck-page-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mk-font-mono, monospace);
}

.mk-selfcheck-page-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.mk-selfcheck-page-badge.is-ok { color: var(--mk-success, #3fb950); background: rgba(63,185,80,.10); }
.mk-selfcheck-page-badge.is-regression { color: #ff6b64; background: rgba(248,81,73,.12); }
.mk-selfcheck-page-badge.is-refreeze { color: #f2c94c; background: rgba(242,201,76,.10); }
.mk-selfcheck-page-badge.is-candidate { color: #f2c94c; background: rgba(242,201,76,.10); }
.mk-selfcheck-page-badge.is-stale { color: #d9b38c; background: rgba(217,179,140,.10); }
.mk-selfcheck-page-badge.is-unfrozen { color: var(--mk-muted, #8b8b85); background: rgba(139,139,133,.10); }

/* column 2: matrix */
.mk-selfcheck-matrixwrap {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}

.mk-selfcheck-filters {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.mk-selfcheck-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.mk-selfcheck-matrix thead th {
  position: sticky;
  top: 0;
  background: rgba(15,31,46,.95);
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-muted, #8b8b85);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 1;
}

.mk-selfcheck-matrix thead th:not(.mk-selfcheck-rowlabel) { text-align: center; }

.mk-selfcheck-matrix tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); }
.mk-selfcheck-matrix tbody tr:hover { background: rgba(255,255,255,.03); }
.mk-selfcheck-matrix tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }

.mk-selfcheck-rowlabel {
  padding: 7px 12px;
  max-width: 320px;
}

.mk-selfcheck-slot {
  display: block;
  font-family: var(--mk-font-mono, monospace);
  font-size: 12px;
}

.mk-selfcheck-instance { font-size: 10px; }

.mk-selfcheck-cell { padding: 5px 8px; text-align: center; }

.mk-selfcheck-pseudo-row { background: rgba(255,255,255,.025); }
.mk-selfcheck-pseudo-row .mk-selfcheck-slot { color: var(--mk-muted, #8b8b85); }

/* column 3: details */
.mk-selfcheck-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 76vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}

.mk-selfcheck-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mk-selfcheck-details-head h2 {
  margin: 0;
  font-size: 15px;
  font-family: var(--mk-font-mono, monospace);
  word-break: break-all;
}

.mk-selfcheck-verdict {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(248,81,73,.08);
  font-size: 12px;
}

.mk-selfcheck-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.mk-selfcheck-shot {
  margin: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
}

.mk-selfcheck-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.mk-selfcheck-shot figcaption {
  padding: 4px 8px;
  font-size: 10px;
  color: var(--mk-muted, #8b8b85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mk-selfcheck-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}

/* job progress */
.mk-selfcheck-job {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid rgba(63,185,80,.35);
  border-radius: 10px;
  background: rgba(63,185,80,.05);
}

.mk-selfcheck-job.is-done { border-color: rgba(255,255,255,.12); background: transparent; }

.mk-selfcheck-job-status { font-size: 12px; }

.mk-selfcheck-job-log {
  margin: 0;
  max-height: 120px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  font-family: var(--mk-font-mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
}

/* toast */
.mk-selfcheck-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  background: #0f1f2e;
  border: 1px solid rgba(63,185,80,.5);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  cursor: pointer;
  font-size: 13px;
}

/* empty states */
.mk-selfcheck-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 20px;
  text-align: center;
}

.mk-selfcheck-empty pre {
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(0,0,0,.3);
  font-size: 11.5px;
  text-align: left;
}

.mk-selfcheck-empty-small { color: var(--mk-muted, #8b8b85); font-size: 12.5px; }

/* approve modal */
.mk-selfcheck-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.mk-selfcheck-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(480px, calc(100vw - 40px));
  padding: 22px;
  border-radius: 14px;
  background: #14273a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}

.mk-selfcheck-modal h2 { margin: 0; font-size: 16px; }

.mk-selfcheck-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* ── Bundle redirect (admin ↔ page-editor SPA hand-off) ─────────────────── */
.mk-bundle-redirect {
  margin: 40vh auto 0;
  max-width: 320px;
  text-align: center;
  color: var(--mk-text-muted, #8a8f98);
  font-size: 14px;
}

/* ── Section page legend: Visible vs Draft vs language pills ────────────── */
.pm-section-legend {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--mk-bg-elev, #101a30);
  border: 1px solid var(--mk-border, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
}

.pm-section-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-section-legend-row p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mk-text-muted, #aab3c4);
}

.pm-legend-swatch {
  pointer-events: none;
  flex: 0 0 auto;
}

.pm-section-legend-sep {
  color: var(--mk-text-muted, #aab3c4);
  font-size: 12px;
}

/* ─── Multi-tenant organizations (2026-09-10) ───────────────────────────── */

.mk-org-switcher {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mk-border, rgba(255, 255, 255, 0.08));
}

.mk-org-switcher-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mk-text-muted, #aab3c4);
}

.mk-org-switcher-select {
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--mk-border, rgba(255, 255, 255, 0.12));
  background: var(--mk-surface-raised, #161b26);
  color: inherit;
  font-size: 13px;
}

.pm-login-switch {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--mk-accent, #6c8cff);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.pm-login-switch:hover {
  text-decoration: underline;
}

.pm-org-section {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--mk-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--mk-surface, #10141c);
}

.pm-org-section h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.pm-org-section h3 {
  margin: 16px 0 8px;
  font-size: 13px;
  color: var(--mk-text-muted, #aab3c4);
}

.pm-org-invite-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pm-org-invite-form .mk-input {
  min-width: 220px;
}

.mk-org-invite-link {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--mk-border, rgba(255, 255, 255, 0.16));
}

.mk-org-invite-link code {
  word-break: break-all;
  font-size: 12px;
}

.mk-org-role-select {
  width: auto;
  padding: 4px 8px;
  font-size: 13px;
}

.mk-status-pill.mk-status-info {
  background: rgba(108, 140, 255, 0.16);
  color: #9db1ff;
}

/* ── ExStudio binding (page_body) ─────────────────────────────── */
.mk-exstudio-binding {
  border: 1px solid var(--mk-border, #2a2f3a);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.mk-exstudio-binding-head { display: flex; align-items: baseline; gap: 8px; }
.mk-exstudio-binding-title { font-weight: 600; font-size: 12px; }
.mk-exstudio-binding-hint { font-size: 11px; opacity: 0.6; }
.mk-exstudio-binding-row { display: flex; align-items: center; gap: 10px; }
.mk-exstudio-binding-label { width: 110px; font-size: 12px; opacity: 0.8; }
.mk-exstudio-binding-select {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--mk-border, #2a2f3a);
  background: var(--mk-input-bg, #141822); color: inherit; font-size: 12px;
}

/* Site card status toggle */
.pm-site-status-toggle { margin-left: auto; padding: 4px 12px; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   KOTEC SPACE — VIDEO SKIN (2026-09-13)
   Temporary premium dark re-skin for filming. Layout untouched.
   Deep-space glass · electric magenta #dd0084 · acid green #deff9a
   ════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --mk-color-red: #dd0084;
  --mk-color-red-hover: #f0149a;
  --mk-color-warm: #deff9a;
  --mk-color-warn: #f5d90a;
  --mk-success: #b7f95f;
  --mk-danger: #ff5c7a;
  --mk-bg: #050817;
  --mk-bg-elev: rgba(255, 255, 255, 0.03);
  --mk-bg-elev-2: rgba(255, 255, 255, 0.05);
  --mk-surface: rgba(255, 255, 255, 0.04);
  --mk-text: #ffffff;
  --mk-text-muted: #94a3b8;
  --mk-border: rgba(255, 255, 255, 0.08);
  --mk-focus: #dd0084;
  --mk-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --mk-shadow-2: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --kotec-magenta: #dd0084;
  --kotec-magenta-soft: rgba(221, 0, 132, 0.14);
  --kotec-green: #deff9a;
  --kotec-green-soft: rgba(222, 255, 154, 0.09);
  --kotec-glow-magenta: 0 0 24px rgba(221, 0, 132, 0.42);
}

/* Force dark even on light-OS viewers (film-safe) */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: dark;
    --mk-bg: #050817;
    --mk-bg-elev: rgba(255, 255, 255, 0.03);
    --mk-bg-elev-2: rgba(255, 255, 255, 0.05);
    --mk-surface: rgba(255, 255, 255, 0.04);
    --mk-text: #ffffff;
    --mk-text-muted: #94a3b8;
    --mk-border: rgba(255, 255, 255, 0.08);
    --mk-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
    --mk-shadow-2: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
}

/* ── Space backdrop ───────────────────────────────────────────────────── */

html,
body {
  background: #050817;
  color: #ffffff;
}

.mk-app,
.mk-app-control,
.pm-admin-shell,
.pm-auth-shell {
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(221, 0, 132, 0.06), transparent 62%),
    radial-gradient(920px 430px at 88% -8%, rgba(222, 255, 154, 0.035), transparent 58%),
    #050817;
  color: #ffffff;
}

/* ── Typography ───────────────────────────────────────────────────────── */

h1, h2, h3 {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.mk-page-header h1 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.pm-workspace-context {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.mk-page-subtitle {
  color: #94a3b8;
}

code {
  color: #c3cdd8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Sidebar: seamless, border-separated ──────────────────────────────── */

.pm-admin-sidebar {
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}

.pm-admin-sidebar-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pm-control-brand-mark {
  background: var(--kotec-magenta);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 9px;
  box-shadow: 0 0 18px rgba(221, 0, 132, 0.38);
}

.pm-control-brand-copy strong {
  color: #ffffff;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.pm-control-brand-copy small {
  color: #94a3b8;
  letter-spacing: 0.01em;
}

.pm-sidebar-collapse-toggle {
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.pm-sidebar-collapse-toggle:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.pm-admin-nav-group h2,
.pm-admin-nav-disclosure > summary {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.75);
}

.pm-admin-nav-disclosure > summary:hover {
  color: #ffffff;
}

.pm-admin-nav-link {
  color: #94a3b8;
  border-radius: 9px;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.pm-admin-nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.pm-admin-nav-link.is-active {
  background: var(--kotec-green-soft);
  color: var(--kotec-green);
}

.pm-admin-nav-link.is-active svg {
  color: var(--kotec-green);
}

.mk-org-switcher-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.75);
}

.mk-org-switcher-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: #ffffff;
  border-radius: 9px;
}

.pm-admin-account {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pm-admin-avatar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.pm-admin-account-copy strong { color: #ffffff; }
.pm-admin-account-copy small { color: #94a3b8; }

.pm-admin-signout {
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  border-radius: 8px;
}

.pm-admin-signout:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.pm-site-context {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  color: #94a3b8;
}

.pm-site-context code { background: transparent; border: none; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.mk-button {
  background: var(--kotec-magenta);
  color: #ffffff;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: box-shadow 160ms ease-out, background-color 160ms ease-out,
    transform 160ms ease-out;
}

.mk-button:hover:not(:disabled) {
  background: var(--kotec-magenta);
  box-shadow: var(--kotec-glow-magenta), 0 2px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.mk-button:active:not(:disabled) { transform: translateY(0); }

.mk-button:disabled {
  background: rgba(221, 0, 132, 0.35);
  color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.mk-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(222, 255, 154, 0.28);
}

.mk-button-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.mk-button-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  transform: translateY(-1px);
}

.mk-button-secondary:disabled {
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}

.mk-button-danger {
  background: transparent;
  color: #ff8098;
  border: 1px solid rgba(255, 92, 122, 0.35);
}

.mk-button-danger:hover:not(:disabled) {
  background: rgba(255, 92, 122, 0.12);
  border-color: rgba(255, 92, 122, 0.55);
  box-shadow: 0 0 18px rgba(255, 92, 122, 0.18);
}

/* ── Inputs & selects ─────────────────────────────────────────────────── */

.mk-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: #ffffff;
  border-radius: 10px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out,
    background-color 150ms ease-out;
}

.mk-input::placeholder { color: rgba(148, 163, 184, 0.65); }

.mk-input:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }

.mk-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--kotec-magenta);
  box-shadow: 0 0 0 3px rgba(221, 0, 132, 0.16), 0 0 20px rgba(221, 0, 132, 0.12);
}

.mk-input:disabled {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
}

select.mk-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

select.mk-input option,
select.mk-input optgroup {
  background: #0a0e1c;
  color: #ffffff;
}

.mk-input-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

/* ── iOS toggle switches (acid green) ─────────────────────────────────── */

.mk-field-toggle { cursor: pointer; }

.mk-field-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  min-width: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out,
    box-shadow 180ms ease-out;
}

.mk-field-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mk-field-toggle input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.mk-field-toggle input[type="checkbox"]:checked {
  background: var(--kotec-green);
  border-color: var(--kotec-green);
  box-shadow: 0 0 14px rgba(222, 255, 154, 0.3);
}

.mk-field-toggle input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.mk-field-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(222, 255, 154, 0.3);
}

/* ── Modal: floating glass card ───────────────────────────────────────── */

.mk-modal-backdrop {
  background: rgba(4, 6, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mk-modal {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.mk-modal-head,
.mk-modal-foot {
  border-color: rgba(255, 255, 255, 0.08);
}

.mk-modal-head h2 { font-size: 17px; font-weight: 650; }

.pm-deploy-preview {
  background: var(--kotec-green-soft);
  border: 1px solid rgba(222, 255, 154, 0.2);
  color: var(--kotec-green);
  border-radius: 10px;
}

/* ── Cards & sections (glass) ─────────────────────────────────────────── */

.pm-site-card,
.pm-settings-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 170ms ease-out, transform 170ms ease-out,
    box-shadow 170ms ease-out;
}

.pm-site-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);
}

.pm-site-card-copy h2 { color: #ffffff; font-weight: 600; }
.pm-site-card-copy code,
.pm-site-card-copy p { color: #94a3b8; }

.pm-site-monogram {
  background: var(--kotec-magenta-soft);
  color: #f2a8d3;
  border: 1px solid rgba(221, 0, 132, 0.28);
  font-weight: 650;
}

.pm-site-meta dt {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.8);
}

.pm-site-meta dd { color: #e2e8f0; }

.pm-settings-section-head h2 { color: #ffffff; }
.pm-settings-section-head p { color: #94a3b8; }

.pm-site-domains li,
.pm-site-domains code {
  border-color: rgba(255, 255, 255, 0.09);
}

/* ── Status pills ─────────────────────────────────────────────────────── */

.mk-status-pill {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

.mk-status-pill-up {
  background: var(--kotec-green-soft);
  border-color: rgba(222, 255, 154, 0.28);
  color: #cdf383;
}

.mk-status-pill-warn {
  background: rgba(245, 217, 10, 0.08);
  border-color: rgba(245, 217, 10, 0.25);
  color: #ecd75c;
}

.mk-status-pill-down,
.mk-status-pill-error {
  background: rgba(255, 92, 122, 0.09);
  border-color: rgba(255, 92, 122, 0.3);
  color: #ff8098;
}

/* ── Feedback banners ─────────────────────────────────────────────────── */

.mk-success {
  background: var(--kotec-green-soft);
  border: 1px solid rgba(222, 255, 154, 0.25);
  color: #d6fba0;
  border-radius: 12px;
  backdrop-filter: blur(12px);
}

.mk-error {
  background: rgba(255, 92, 122, 0.08);
  border: 1px solid rgba(255, 92, 122, 0.28);
  color: #ff9db1;
  border-radius: 12px;
  backdrop-filter: blur(12px);
}

/* ── Empty states, summary ────────────────────────────────────────────── */

.pm-empty-state {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  color: #94a3b8;
}

.pm-empty-state h2 { color: #ffffff; }

.pm-empty-icon {
  background: var(--kotec-magenta-soft);
  border: 1px solid rgba(221, 0, 132, 0.25);
  color: #f2a8d3;
}

.pm-collection-summary {
  color: #94a3b8;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.pm-collection-summary strong { color: #ffffff; }

/* ── Login (auth shell) ───────────────────────────────────────────────── */

.pm-login-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.pm-login-logo { display: none; }

.pm-login-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pm-login-brand::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--kotec-magenta);
  box-shadow: 0 0 20px rgba(221, 0, 132, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M11 10v14M11 10h7.5a4.5 4.5 0 0 1 0 9H11m9 5-6.5-9' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  margin-right: 12px;
  flex: none;
}

.pm-login-sub { color: #94a3b8; }

/* ── Scrollbars ───────────────────────────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.22); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mk-button,
  .mk-button-secondary,
  .pm-site-card,
  .pm-admin-nav-link,
  .mk-input,
  .mk-field-toggle input[type="checkbox"],
  .mk-field-toggle input[type="checkbox"]::after {
    transition: none;
  }
  .mk-button:hover:not(:disabled),
  .mk-button-secondary:hover:not(:disabled),
  .pm-site-card:hover { transform: none; }
}

/* ── Page Studio: server history in the draft-history drawer ─────────── */

.mk-page-history-server {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mk-page-history-server-step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.mk-page-history-server-step > div {
  flex: 1;
  min-width: 0;
}

.mk-page-history-server-step strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-page-history-server-action {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  white-space: nowrap;
}

.mk-page-history-server-step .mk-button-sm {
  flex: none;
}

/* ── Workspace header readability on the film-safe dark backdrop ───────────
 * (plan 1789841700000) .mk-app-control re-declares light tokens
 * (--mk-text: #1d1a21, --mk-text-muted: #625d68) for its surfaces, but the
 * collection-page headers sit directly on the dark app backdrop — the h1 and
 * subtitle inherited the scoped dark colors and became dark-on-dark
 * (unreadable "Partners"/"Services"/… titles). Force light text for the
 * elements that live on the backdrop; light surfaces inside (tables, cards)
 * keep their scoped tokens and stay as designed.
 */
.pm-workspace-header h1 { color: #ffffff; }
.pm-workspace-header .mk-page-subtitle { color: #a7b4c2; }
.pm-back-link { color: #c3cdd8; }
.pm-back-link:hover { color: #dd0084; }

/* ── Light surfaces vs film-safe white text (plan 1789841700000, follow-up) ──
 * The film-safe layer paints .mk-app-control text white for the dark
 * backdrop, but collection tables and the partner editor card sit on WHITE
 * surfaces (.pm-data-panel background: var(--mk-surface) = #fff in the
 * scoped light tokens) — plain table cells and form controls inherited
 * white-on-white and vanished. Scope explicit dark text to those surfaces.
 */
.mk-table td { color: #1f2937; }

.pm-partner-form { color: #1f2937; }
.pm-partner-form .mk-field > span { color: #4b5563; }
.pm-partner-form .mk-input {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #d5d9e0;
}
.pm-partner-form .mk-button-secondary {
    background: #ececf2;
    color: #1f2937;
    border: 1px solid #cfd4dd;
}
.pm-partner-form .mk-button-secondary:hover {
    background: #e2e4ec;
}
.pm-partner-form select.mk-input { color: #1f2937; }

/* Reorder/disabled icon buttons: keep the glyph readable instead of
 * near-invisible (was opacity .3). */
.mk-icon-btn:disabled { opacity: 0.45; }

/* ── Universal content form (Block editor): группы, подсказки, медиа ── */
.mk-universal-form-group {
  padding-top: 14px;
  border-top: 1px solid var(--mk-border);
}
.mk-universal-form-group:first-child {
  border-top: none;
  padding-top: 0;
}
.mk-universal-form-group-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mk-text-muted);
}
.mk-universal-field {
  margin-bottom: 14px;
}
.mk-universal-field .mk-input-label {
  display: block;
  margin-bottom: 4px;
}
.mk-universal-field .mk-field-hint {
  display: block;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--mk-text-muted);
}
.mk-universal-media-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mk-universal-media-thumb {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--mk-border);
  flex: none;
}
video.mk-universal-media-thumb {
  width: 160px;
  height: auto;
}
.mk-universal-media-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 64px;
  padding: 0 10px;
  border: 1px dashed var(--mk-border);
  border-radius: 8px;
  font-size: 11px;
  color: var(--mk-text-muted);
  flex: none;
}
.mk-universal-media-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mk-universal-media-manual {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.mk-universal-media-manual .mk-input {
  flex: 1;
}
.mk-universal-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.mk-universal-toggle .mk-input-label {
  margin: 0;
}
.mk-universal-toggle .mk-field-hint {
  flex-basis: 100%;
}
.mk-universal-array .mk-input-label {
  display: block;
  margin-bottom: 6px;
}
.mk-universal-array > .mk-button-secondary {
  margin-top: 8px;
}

/* Send/Sync/Discard live at the TOP of the editor — right under the panel
   header ("Block / Portfolio hero / Block 1 of 1"), visible without any
   scrolling. */
.mk-block-editor-actions {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-panel-bg, #101423);
  backdrop-filter: blur(6px);
}

/* ── Collection rows: читаемость на светлых карточках (2026-09-23) ────────
 * Скоуп .mk-app-control (страницы /sites/*): карточки .pm-group и легенда
 * белые (light-токены), но эти элементы были раскрашены под тёмный film-safe
 * фон. Контрасты по computed-проверке (плейбук §8.2):
 *   .pm-lang-pill.is-draft      1.32 (пале-жёлтый на жёлтой 16%-дымке)
 *   .pm-lang-pill.is-published  2.17 (пале-мятный на зелёной дымке)
 *   .pm-site-context code       тёмный #1d1a21 на тёмной полосе шелла
 *   Edit / Delete permanently   одинаковый розовый #dd0084 (danger неотличим)
 * Образец переопределения — .mk-app-control .mk-status-pill-* выше по файлу.
 */
.mk-app-control .pm-lang-pill.is-published {
  color: #085d3a;
  border-color: #9bd4bb;
  background: #edfdf4;
}
.mk-app-control .pm-lang-pill.is-draft {
  color: #694100;
  border-color: #e8c879;
  background: #fff8e1;
}
.mk-app-control .pm-lang-pill.is-missing {
  color: #625d68;
  border-color: #cfd4dd;
  background: transparent;
}

/* id сайта в тёмной полосе шелла: явный светлый моно-текст (утёкший
   light-скоуп --mk-text #1d1a21 делал код невидимым на тёмном) */
.pm-site-context code { color: #e8edf5; }

/* Ряды коллекций: Edit — вторичная тихая кнопка, Delete permanently —
   красная обводка (danger), чтобы разделить семантику и убрать стену
   одинаковых розовых кнопок ×26 строк */
.mk-app-control .pm-group-actions .mk-button.mk-button-secondary,
.mk-app-control .mk-actions-inline .mk-button.mk-button-secondary {
  background: #ececf2;
  color: #1f2937;
  border: 1px solid #cfd4dd;
}
.mk-app-control .pm-group-actions .mk-button.mk-button-secondary:hover,
.mk-app-control .mk-actions-inline .mk-button.mk-button-secondary:hover {
  background: #e2e4ec;
}
.mk-app-control .pm-danger-button {
  background: #ffffff;
  color: #b3261e;
  border: 1px solid #f0b4ab;
}
.mk-app-control .pm-danger-button:hover:not(:disabled) {
  background: #fef3f2;
  border-color: #e08a7d;
}

/* hover заголовка строки: --mk-color-warm (#deff9a) на белой карточке
   делал заголовок невидимым при наведении (поймано vision-проверкой) */
.mk-app-control .pm-group-title:hover .pm-group-name {
  color: #b00069;
}