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

.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-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-color-red); font-weight: 600; }

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

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

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

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

.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);
}
.mk-block-editor-label {
  font-size: var(--mk-font-size-xs);
  color: var(--mk-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Add-Block catalog cards ─────────────────────────────────────────────── */
.mk-block-type-picker { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.mk-block-type-card { display:flex; flex-direction:column; gap:6px; padding:8px; text-align:left; border:1px solid var(--mk-border); border-radius:var(--mk-radius-sm); background:var(--mk-bg-elev); color:var(--mk-text); cursor:pointer; transition:border-color var(--mk-duration-fast) var(--mk-ease-standard), background-color var(--mk-duration-fast) var(--mk-ease-standard), transform var(--mk-duration-fast) var(--mk-ease-enter); }
.mk-block-type-card:hover { border-color:var(--mk-focus); background:var(--mk-bg-elev-2); transform:var(--mk-motion-lift); }
.mk-block-type-card-active { border-color:var(--mk-color-red); box-shadow:0 0 0 1px var(--mk-color-red) inset; }
.mk-block-type-card-preview { min-height:60px; overflow:hidden; border-radius:6px; background:var(--mk-bg); padding:6px; }
.mk-block-type-card-label { font-size:11px; color:var(--mk-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

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

.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-color-red); font-weight:600; }
.mk-media-picker-main { flex:1; display:flex; flex-direction:column; gap:8px; padding:12px; min-width:0; }
.mk-media-search { width:100%; }
.mk-media-grid { flex:1; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; align-content:start; }
.mk-media-cell { position:relative; display:flex; flex-direction:column; gap:4px; padding:6px; border:1px solid var(--mk-border); border-radius:var(--mk-radius-sm); background:var(--mk-bg); cursor:pointer; text-align:left; }
.mk-media-cell:hover { border-color:var(--mk-focus); }
.mk-media-cell.selected { border-color:var(--mk-color-red); box-shadow:0 0 0 1px var(--mk-color-red) inset; }
.mk-media-cell img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; background:var(--mk-bg-elev-2); }
.mk-media-cell-name { font-size:11px; color:var(--mk-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

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

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

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

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

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

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

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

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

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


/* Portfolio studio */
.mk-portfolio-studio { display: flex; flex-direction: column; gap: var(--mk-space-4); }
.mk-portfolio-studio-head, .mk-portfolio-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-space-4); flex-wrap: wrap; }
.mk-eyebrow { display: inline-flex; color: var(--mk-text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.mk-portfolio-studio-head h3, .mk-portfolio-form-head h3 { margin: 4px 0 0; color: var(--mk-text); font-size: 24px; line-height: 1.1; }
.mk-portfolio-studio-head p { margin: 8px 0 0; max-width: 620px; color: var(--mk-text-muted); }
.mk-portfolio-count { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); background: var(--mk-bg-elev); color: var(--mk-text-muted); font-weight: 700; }
.mk-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--mk-space-5); }
.mk-portfolio-workspace { min-width: 0; }
.mk-portfolio-card, .mk-portfolio-editor-shell { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: radial-gradient(circle at 85% 8%, rgba(215, 38, 62, 0.13), transparent 34%), linear-gradient(145deg, rgba(24, 49, 68, 0.94), rgba(5, 10, 26, 0.98)); 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: var(--mk-space-3); min-height: 210px; padding: var(--mk-space-4); }
.mk-portfolio-copy h4 { margin: 0; color: var(--mk-text); font-size: 22px; line-height: 1.15; }
.mk-portfolio-subtitle, .mk-portfolio-desc { margin: 8px 0 0; color: var(--mk-text-muted); }
.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, .mk-portfolio-savebar { display: flex; flex-wrap: wrap; gap: var(--mk-space-2); padding: 0 var(--mk-space-4) var(--mk-space-4); }
.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; } }