/*
 * crenya marketing console — the crenya screen design system for a plain-HTML app.
 *
 * COPIED, not imported: this service has no bundler, so the tokens and a minimal subset of the kit
 * are copied from frontend/packages/ui/src/app/theme.css (--app-* tokens) and app.css (.cx-* kit).
 * Names are kept identical so a future sync is a straight re-copy. App-only rules at the bottom use
 * the .mk-* prefix and only --app-* tokens — never a raw hex (docs/engineering/thumb-rules.md §6).
 */

/* =============================== tokens (theme.css) =============================== */
/* ---- Light ---- */
.cx-app,
.cx-theme {
  --app-bg: #f7f7f5;
  --app-sidebar: rgb(242 242 239 / 0.78);
  --app-sidebar-border: rgb(20 20 15 / 0.08);
  --app-sidebar-active: rgb(0 112 171 / 0.11);
  --app-sidebar-active-fg: #00619b;

  --app-fg: #1c1c1f;
  --app-muted-fg: #5c5c65;
  --app-subtle-fg: #6f6f77;

  --app-card: #ffffff;
  --app-card-fg: #1c1c1f;
  --app-popover: rgb(255 255 255 / 0.97);
  --app-border: rgb(20 20 15 / 0.09);
  --app-border-strong: rgb(20 20 15 / 0.16);
  --app-input: rgb(20 20 15 / 0.16);
  --app-muted: rgb(20 20 15 / 0.04);
  --app-hover: rgb(20 20 15 / 0.055);

  --app-primary: #0070ab;
  --app-primary-hover: #00619b;
  --app-primary-fg: #ffffff;
  --app-primary-soft: rgb(0 112 171 / 0.1);

  --app-success: #136b3e;
  --app-success-soft: rgb(19 107 62 / 0.09);
  --app-warning: #9a5200;
  --app-warning-soft: rgb(154 82 0 / 0.1);
  --app-danger: #c8261b;
  --app-danger-hover: #b01f15;
  --app-danger-fg: #ffffff;
  --app-danger-soft: rgb(200 38 27 / 0.08);

  --app-ring: #0070ab;

  /* Dialog/drawer scrim: dark regardless of theme, since it dims whatever content sits under it. */
  --app-backdrop: rgb(20 20 15 / 0.45);

  --app-shadow-card: none;
  --app-shadow-pop: 0 10px 30px rgb(20 20 15 / 0.14), 0 1px 3px rgb(20 20 15 / 0.08);

  /* Radius by size: 4 small controls · 8 buttons/inputs · 12 panels · 16 cards/dialogs. */
  --app-radius-sm: 4px;
  --app-radius-md: 8px;
  --app-radius-lg: 12px;
  --app-radius-xl: 16px;

  --app-font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
  --app-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Density: billing (customers, phones) 14px body + 44px rows; .cx-app--compact is license. */
  --app-text: 14px;
  --app-text-sm: 12.5px;
  --app-row: 44px;

  /* Motion (ui-ux-standard §2). */
  --app-fast: 100ms;
  --app-duration: 150ms;
  --app-enter: 240ms;
  --app-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Legacy umbrella tokens, remapped so un-migrated app CSS recolours with the theme. */
  --paper: var(--app-bg);
  --page-wash: var(--app-bg);
  --card: var(--app-card);
  --ink: var(--app-fg);
  --ink-strong: var(--app-fg);
  --muted: var(--app-muted-fg);
  --line: var(--app-border);
  --signal: var(--app-primary);
  --on-signal-ink: var(--app-primary-fg);
  --success: var(--app-success);
  --danger: var(--app-danger);
  --danger-fill: var(--app-danger);
  --warning-text: var(--app-warning);
  --sand: var(--app-primary-soft);
  --focus-ring: var(--app-ring);
  --font-body: var(--app-font-sans);
  --font-display: var(--app-font-sans);
  --pill-active-bg: var(--app-success-soft);
  --pill-active-text: var(--app-success);
  --pill-pending-bg: var(--app-warning-soft);
  --pill-pending-text: var(--app-warning);
  --pill-broken-bg: var(--app-danger-soft);
  --pill-broken-text: var(--app-danger);
  --pill-attention-bg: var(--app-primary-soft);
  --pill-attention-text: var(--app-primary);

  color-scheme: light;
}

.cx-app--compact,
.cx-theme--compact {
  --app-text: 13px;
  --app-text-sm: 12px;
  --app-row: 40px;
}

/* ---- Dark (OS preference, unless the page forces light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cx-app,
  :root:not([data-theme="light"]) .cx-theme {
    --app-bg: #141417;
    --app-sidebar: rgb(28 28 32 / 0.6);
    --app-sidebar-border: rgb(255 255 255 / 0.08);
    --app-sidebar-active: rgb(101 180 233 / 0.16);
    --app-sidebar-active-fg: #8ccbf4;
    --app-fg: #dedee3;
    --app-muted-fg: #a3a3ad;
    --app-subtle-fg: #8d8d97;
    --app-card: #1d1d21;
    --app-card-fg: #dedee3;
    --app-popover: rgb(38 38 43 / 0.97);
    --app-border: rgb(255 255 255 / 0.08);
    --app-border-strong: rgb(255 255 255 / 0.14);
    --app-input: rgb(255 255 255 / 0.14);
    --app-muted: rgb(255 255 255 / 0.045);
    --app-hover: rgb(255 255 255 / 0.07);
    --app-primary: #65b4e9;
    --app-primary-hover: #7dc3f4;
    --app-primary-fg: #0e1116;
    --app-primary-soft: rgb(101 180 233 / 0.15);
    --app-success: #3ec07a;
    --app-success-soft: rgb(62 192 122 / 0.14);
    --app-warning: #f0a040;
    --app-warning-soft: rgb(240 160 64 / 0.14);
    --app-danger: #ff6b61;
    --app-danger-hover: #ff8279;
    --app-danger-fg: #141417;
    --app-danger-soft: rgb(255 107 97 / 0.13);
    --app-ring: #65b4e9;
    /* Darker + more opaque so a light dialog card still reads against a dark page behind it. */
    --app-backdrop: rgb(0 0 0 / 0.6);
    --app-shadow-card: none;
    --app-shadow-pop: 0 14px 40px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}

/* ---- Dark (forced by the theme toggle) ---- */
:root[data-theme="dark"] .cx-app,
:root[data-theme="dark"] .cx-theme {
  --app-bg: #141417;
  --app-sidebar: rgb(28 28 32 / 0.6);
  --app-sidebar-border: rgb(255 255 255 / 0.08);
  --app-sidebar-active: rgb(101 180 233 / 0.16);
  --app-sidebar-active-fg: #8ccbf4;
  --app-fg: #dedee3;
  --app-muted-fg: #a3a3ad;
  --app-subtle-fg: #8d8d97;
  --app-card: #1d1d21;
  --app-card-fg: #dedee3;
  --app-popover: rgb(38 38 43 / 0.97);
  --app-border: rgb(255 255 255 / 0.08);
  --app-border-strong: rgb(255 255 255 / 0.14);
  --app-input: rgb(255 255 255 / 0.14);
  --app-muted: rgb(255 255 255 / 0.045);
  --app-hover: rgb(255 255 255 / 0.07);
  --app-primary: #65b4e9;
  --app-primary-hover: #7dc3f4;
  --app-primary-fg: #0e1116;
  --app-primary-soft: rgb(101 180 233 / 0.15);
  --app-success: #3ec07a;
  --app-success-soft: rgb(62 192 122 / 0.14);
  --app-warning: #f0a040;
  --app-warning-soft: rgb(240 160 64 / 0.14);
  --app-danger: #ff6b61;
  --app-danger-hover: #ff8279;
  --app-danger-fg: #141417;
  --app-danger-soft: rgb(255 107 97 / 0.13);
  --app-ring: #65b4e9;
  /* Darker + more opaque so a light dialog card still reads against a dark page behind it. */
  --app-backdrop: rgb(0 0 0 / 0.6);
  --app-shadow-card: none;
  --app-shadow-pop: 0 14px 40px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

/* ---- Increased contrast ---- */
@media (prefers-contrast: more) {
  .cx-app,
  .cx-theme {
    --app-border: rgb(0 0 0 / 0.22);
    --app-border-strong: rgb(0 0 0 / 0.35);
    --app-input: rgb(0 0 0 / 0.35);
    --app-muted-fg: #4a4a52;
    /* More opaque so the dimmed page can't be mistaken for part of the dialog's own contrast. */
    --app-backdrop: rgb(20 20 15 / 0.6);
  }
  :root[data-theme="dark"] .cx-app,
  :root[data-theme="dark"] .cx-theme {
    --app-border: rgb(255 255 255 / 0.25);
    --app-border-strong: rgb(255 255 255 / 0.4);
    --app-input: rgb(255 255 255 / 0.35);
    --app-muted-fg: #c4c4cc;
    --app-backdrop: rgb(0 0 0 / 0.75);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cx-app,
  :root:not([data-theme="light"]) .cx-theme {
    --app-border: rgb(255 255 255 / 0.25);
    --app-border-strong: rgb(255 255 255 / 0.4);
    --app-input: rgb(255 255 255 / 0.35);
    --app-muted-fg: #c4c4cc;
    --app-backdrop: rgb(0 0 0 / 0.75);
  }
}

/* =============================== kit subset (app.css) =============================== */
/* ---- Frame basics ---- */
.cx-app,
.cx-theme {
  font-family: var(--app-font-sans);
  font-size: var(--app-text);
  line-height: 1.45;
  color: var(--app-fg);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cx-app :where(h1, h2, h3, h4),
.cx-theme :where(h1, h2, h3, h4) {
  font-family: var(--app-font-sans);
}

/* Measured values: money, dates, days left, invoice/order numbers. */
.cx-mono {
  font-family: var(--app-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  letter-spacing: -0.01em;
}

/* THE focus ring (ui-ux-standard §4/§9): 2px --app-ring, 2px offset. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cx-btn:focus-visible,
.cx-tab:focus-visible,
.cx-iconbtn:focus-visible,
.cx-acct__chip:focus-visible {
  outline: 2px solid var(--focus-ring, var(--ink));
  outline-offset: 2px;
}

/* ---- Buttons ---- */
.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-strong);
  background-color: var(--app-card);
  color: var(--app-fg);
  font: 500 var(--app-text) / 1 var(--app-font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--app-fast) ease-out,
    border-color var(--app-fast) ease-out,
    color var(--app-fast) ease-out,
    transform var(--app-fast) ease-out;
}
.cx-btn svg {
  flex: none;
}
.cx-btn:active {
  transform: scale(0.98);
}
.cx-btn--primary {
  background-color: var(--app-primary);
  border-color: transparent;
  color: var(--app-primary-fg);
}
.cx-btn--danger {
  background-color: var(--app-danger);
  border-color: transparent;
  color: var(--app-danger-fg);
}
.cx-btn--ghost {
  background-color: transparent;
  border-color: transparent;
}
.cx-btn--danger-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--app-danger);
}
.cx-btn--sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--app-text-sm);
}
@media (hover: hover) {
  /* A translucent layer over whatever surface the button has (card or transparent). */
  .cx-btn:hover {
    background-image: linear-gradient(var(--app-hover), var(--app-hover));
  }
  .cx-btn--primary:hover {
    background-color: var(--app-primary-hover);
    background-image: none;
  }
  .cx-btn--danger:hover {
    background-color: var(--app-danger-hover);
    background-image: none;
  }
  .cx-btn--danger-ghost:hover {
    background-color: var(--app-danger-soft);
    background-image: none;
  }
}
/* Disabled look per standard §4: muted surface + not-allowed, still readable (not 50% opacity). */
.cx-btn:disabled,
.cx-btn[aria-disabled="true"] {
  background-color: var(--app-muted);
  background-image: none;
  border-color: var(--app-border);
  color: var(--app-subtle-fg);
  cursor: not-allowed;
  transform: none;
}
.cx-btn[aria-busy="true"] {
  cursor: progress;
}
@media (pointer: coarse) {
  .cx-btn {
    min-height: 44px;
  }
}

/* ---- Inputs ---- */
.cx-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.cx-field__label {
  font-weight: 500;
  font-size: var(--app-text);
  color: var(--app-fg);
}
.cx-field__help {
  margin: 0;
  font-size: var(--app-text-sm);
  color: var(--app-muted-fg);
}
.cx-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--app-text-sm);
  color: var(--app-danger);
}
.cx-input,
.cx-search__input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-input);
  background: var(--app-card);
  color: var(--app-fg);
  font: 400 var(--app-text) / 1.2 var(--app-font-sans);
  transition: border-color var(--app-fast) ease-out;
}
.cx-input::placeholder,
.cx-search__input::placeholder {
  color: var(--app-subtle-fg);
}
@media (hover: hover) {
  .cx-input:hover,
  .cx-search__input:hover {
    border-color: var(--app-border-strong);
  }
}
.cx-input[aria-invalid="true"] {
  border-color: var(--app-danger);
}
.cx-input:disabled {
  background: var(--app-muted);
  color: var(--app-subtle-fg);
  cursor: not-allowed;
}
@media (pointer: coarse) {
  .cx-input,
  .cx-search__input {
    min-height: 44px;
    font-size: 16px;
  }
}

/* ---- Page header & section header ---- */
.cx-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 20px;
}
.cx-phead__text {
  flex: 1 1 260px;
  min-width: 0;
}
.cx-phead__title {
  margin: 0;
  font: 600 26px / 1.2 var(--app-font-sans);
  letter-spacing: -0.02em;
  color: var(--app-fg);
  text-wrap: balance;
}
.cx-phead__sub {
  margin: 4px 0 0;
  font: 400 var(--app-text) / 1.45 var(--app-font-sans);
  color: var(--app-muted-fg);
}
.cx-phead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cx-shead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin: 0 0 10px;
}
.cx-shead__title {
  margin: 0;
  font: 600 15px / 1.3 var(--app-font-sans);
  letter-spacing: -0.01em;
  color: var(--app-fg);
}

/* ---- Tabs ---- */
.cx-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--app-border);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.cx-tabs::-webkit-scrollbar {
  display: none;
}
.cx-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--app-muted-fg);
  font: 500 var(--app-text) / 1 var(--app-font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--app-fast) ease-out;
}
/* The indicator: a transform-only bar. It grows in on load, and carries a view-transition-name so
   an app that opts into cross-document view transitions (@view-transition { navigation: auto })
   sees it slide from the old tab to the new one instead of teleporting. */
.cx-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--app-primary);
  transform: scaleX(0);
  transition: transform var(--app-enter) var(--app-ease-out);
}
.cx-tab--on {
  color: var(--app-fg);
}
.cx-tab--on::after {
  transform: scaleX(1);
  view-transition-name: cx-tab-indicator;
}
@starting-style {
  .cx-tab--on::after {
    transform: scaleX(0.3);
  }
}
@media (hover: hover) {
  .cx-tab:hover {
    color: var(--app-fg);
  }
  .cx-tab:not(.cx-tab--on):hover::after {
    transform: scaleX(1);
    background: var(--app-border-strong);
  }
}

/* ---- Pills ---- */
.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font: 500 12px / 1 var(--app-font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--app-muted);
  color: var(--app-fg);
}
.cx-pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}
/* A pill written by hand without an icon still gets a shape cue. */
.cx-pill:not(:has(svg))::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cx-pill--success {
  background: var(--app-success-soft);
  color: var(--app-success);
}
.cx-pill--warning {
  background: var(--app-warning-soft);
  color: var(--app-warning);
}
.cx-pill--danger {
  background: var(--app-danger-soft);
  color: var(--app-danger);
}
.cx-pill--muted {
  color: var(--app-muted-fg);
}

/* ---- Cards ---- */
.cx-card {
  background: var(--app-card);
  color: var(--app-card-fg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-xl);
  box-shadow: var(--app-shadow-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.cx-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.cx-card__head:has(+ .cx-card__body--flush) {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-border);
}
.cx-card__icon {
  display: inline-flex;
  color: var(--app-muted-fg);
  flex: none;
}
.cx-card__titles {
  flex: 1 1 200px;
  min-width: 0;
}
.cx-card__title {
  margin: 0;
  font: 600 15px / 1.3 var(--app-font-sans);
  letter-spacing: -0.01em;
  color: var(--app-fg);
}
.cx-card__sub {
  margin: 2px 0 0;
  font: 400 var(--app-text-sm) / 1.4 var(--app-font-sans);
  color: var(--app-muted-fg);
}
.cx-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cx-card__body {
  overflow-x: auto;
  padding: 4px 16px 16px;
}
.cx-card__head + .cx-card__body--flush,
.cx-card__body--flush {
  padding: 0;
}

/* ---- Brand + icon buttons + account menu ---- */
.cx-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: var(--app-fg);
}
.cx-brand__tag {
  font: 600 10px / 1 var(--app-font-sans);
  letter-spacing: 0.08em;
  color: var(--app-muted-fg);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  padding: 3px 5px;
}

.cx-iconbtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--app-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-muted-fg);
  cursor: pointer;
  transition: background-color var(--app-fast) ease-out;
}
@media (hover: hover) {
  .cx-iconbtn:hover {
    background: var(--app-hover);
    color: var(--app-fg);
  }
}
@media (pointer: coarse) {
  .cx-iconbtn {
    width: 44px;
    height: 44px;
  }
}

.cx-acct {
  position: relative;
}
.cx-acct__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-card);
  color: var(--app-fg);
  cursor: pointer;
  transition: border-color var(--app-fast) ease-out;
}
@media (hover: hover) {
  .cx-acct__chip:hover {
    border-color: var(--app-border-strong);
  }
}
.cx-acct__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--app-primary-soft);
  color: var(--app-sidebar-active-fg);
  font: 600 13px / 1 var(--app-font-sans);
}
.cx-acct__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 200px;
}
.cx-acct__name {
  font: 500 12.5px / 1.2 var(--app-font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.cx-acct__sub {
  font: 400 11.5px / 1.2 var(--app-font-sans);
  color: var(--app-muted-fg);
}
.cx-acct__pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  padding: 6px;
  background: var(--app-popover);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-pop);
  z-index: 20;
  animation: cx-pop-in var(--app-duration) var(--app-ease-out);
}
@keyframes cx-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.cx-acct__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-fg);
  font: 400 var(--app-text) / 1 var(--app-font-sans);
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) {
  .cx-acct__item:hover {
    background: var(--app-hover);
  }
}

/* Native <dialog> dims with the same token as the drawer scrim. */
.cx-app dialog::backdrop,
.cx-theme dialog::backdrop {
  background: var(--app-backdrop);
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .cx-app *,
  .cx-app *::before,
  .cx-app *::after,
  .cx-theme *,
  .cx-theme *::before,
  .cx-theme *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cx-btn:active {
    transform: none;
  }
}

/* =============================== marketing console (.mk-*) =============================== */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
}
body.cx-theme {
  min-height: 100vh;
}
.mk-svg {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
.crenya-wordmark {
  font-family: "Michroma", var(--app-font-sans);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--app-fg);
}
.mk-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 8px 12px;
  border-radius: var(--app-radius-md);
  background: var(--app-card);
  color: var(--app-fg);
  border: 1px solid var(--app-border-strong);
}
.mk-skip:focus {
  top: 8px;
}

/* top bar */
.mk-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--app-bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid var(--app-border);
}
.mk-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.mk-top__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}
.mk-top__row .cx-brand {
  flex: 1 1 auto;
  min-width: 0;
}
.mk-top__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.mk-top .cx-tabs {
  margin: 0;
  border-bottom: 0;
}
.mk-tab {
  background: none;
  border: 0;
  cursor: pointer;
  gap: 6px;
}
.mk-count {
  font: 500 11.5px / 1 var(--app-font-mono);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--app-muted);
  color: var(--app-muted-fg);
  text-align: center;
}
.cx-tab--on .mk-count {
  background: var(--app-primary-soft);
  color: var(--app-sidebar-active-fg);
}
.cx-acct__chip {
  padding: 2px;
}
.cx-acct__pop {
  padding: 6px;
}
.mk-acct__who {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 6px;
}
.mk-acct__label {
  font-size: var(--app-text-sm);
  color: var(--app-muted-fg);
}
.mk-acct__email {
  font-weight: 500;
  overflow-wrap: anywhere;
  margin-top: 2px;
}
.cx-acct__item {
  text-decoration: none;
}

/* page */
.mk-main {
  padding-top: 24px;
  padding-bottom: 64px;
}
.mk-grid {
  display: grid;
  gap: 16px;
}
.mk-grid .cx-card {
  margin: 0;
}
.mk-state {
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-xl);
  color: var(--app-muted-fg);
}
.mk-state h2 {
  margin: 10px 0 4px;
  font: 600 16px / 1.3 var(--app-font-sans);
  color: var(--app-fg);
}
.mk-state p {
  margin: 0 0 16px;
}
.mk-state__icon {
  color: var(--app-subtle-fg);
}
.mk-state--error .mk-state__icon {
  color: var(--app-danger);
}
.mk-skel {
  height: 280px;
  border-radius: var(--app-radius-xl);
  border: 1px solid var(--app-border);
  background: var(--app-card);
  position: relative;
  overflow: hidden;
}
.mk-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--app-muted), transparent);
  animation: mk-shimmer 1.2s infinite;
}
@keyframes mk-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* draft card */
.mk-card__head {
  border-bottom: 1px solid var(--app-border);
  padding-bottom: 12px;
}
.mk-card__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.mk-draft {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
}
.mk-draft__text {
  padding: 12px 16px 12px;
  min-width: 0;
}
.mk-draft__media {
  padding: 12px 16px 16px;
  border-left: 1px solid var(--app-border);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--app-radius-md);
  background: var(--app-muted);
  border: 1px solid var(--app-border);
}
.mk-seg button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-muted-fg);
  font: 500 var(--app-text-sm) / 1 var(--app-font-sans);
  cursor: pointer;
}
.mk-seg button[aria-selected="true"] {
  background: var(--app-card);
  color: var(--app-fg);
  box-shadow: inset 0 0 0 1px var(--app-border-strong);
}
.mk-textrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 6px;
}
.mk-textarea {
  display: block;
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-input);
  background: var(--app-card);
  color: var(--app-fg);
  font: 400 var(--app-text) / 1.55 var(--app-font-sans);
}
.mk-textarea:focus-visible,
.cx-input:focus-visible {
  outline: 2px solid var(--app-ring);
  outline-offset: 0;
  border-color: transparent;
}
.mk-cc {
  font: 500 12px / 1 var(--app-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--app-muted-fg);
}
.mk-cc--over {
  color: var(--app-danger);
}
.mk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.mk-tag {
  font-size: var(--app-text-sm);
  color: var(--app-muted-fg);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--app-muted);
}
.mk-brief {
  margin: 0;
  font-size: var(--app-text-sm);
  color: var(--app-muted-fg);
  line-height: 1.45;
}
.mk-brief b {
  display: block;
  color: var(--app-fg);
  font-weight: 500;
  font-size: var(--app-text);
  margin-bottom: 2px;
}
.mk-urlrow {
  display: flex;
  gap: 8px;
}
.mk-genrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mk-preview {
  flex: 1;
  min-height: 200px;
  border-radius: var(--app-radius-lg);
  border: 1px solid var(--app-border);
  background: var(--app-muted);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: zoom-in;
  width: 100%;
}
.mk-preview img,
.mk-preview video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: contain;
}
.mk-noimg {
  flex: 1;
  min-height: 200px;
  border-radius: var(--app-radius-lg);
  border: 1px dashed var(--app-border-strong);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: var(--app-muted-fg);
  font-size: var(--app-text-sm);
}
.mk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--app-border);
  background: var(--app-muted);
}
.mk-actions__sp {
  flex: 1;
}
.mk-result {
  font-size: var(--app-text-sm);
  color: var(--app-muted-fg);
}

/* spinner inside busy buttons */
.mk-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: mk-rot 0.7s linear infinite;
}
@keyframes mk-rot {
  to {
    transform: rotate(360deg);
  }
}

/* calendar */
.mk-cal {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-xl);
  padding: 12px;
  margin-bottom: 20px;
}
.mk-cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 10px;
}
.mk-cal__month {
  margin: 0;
  font: 600 16px / 1.2 var(--app-font-sans);
}
.mk-cal__nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.mk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.mk-cal__dow {
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--app-muted-fg);
  padding: 4px 0;
}
.mk-day {
  min-height: 92px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  text-align: left;
  padding: 8px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border);
  background: var(--app-card);
  color: var(--app-fg);
  cursor: pointer;
  font: inherit;
}
@media (hover: hover) {
  .mk-day:hover {
    background: var(--app-hover);
  }
}
.mk-day--other {
  color: var(--app-subtle-fg);
  background: transparent;
}
.mk-day__num {
  font: 500 12.5px / 1 var(--app-font-mono);
  font-variant-numeric: tabular-nums;
}
.mk-day--today .mk-day__num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--app-primary);
  color: var(--app-primary-fg);
}
.mk-day--sel {
  border-color: var(--app-primary);
  box-shadow: inset 0 0 0 1px var(--app-primary);
}
.mk-day__fest {
  font-size: 11px;
  color: var(--app-muted-fg);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}
.mk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-subtle-fg);
}
.mk-dot--pending_approval {
  background: var(--app-warning);
}
.mk-dot--approved {
  background: var(--app-success);
}
.mk-dot--rejected {
  background: var(--app-danger);
}
.mk-dot--posted {
  background: var(--app-muted-fg);
}
.mk-day__count {
  font: 500 11px / 1 var(--app-font-mono);
  color: var(--app-muted-fg);
}
.mk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 4px 0;
  font-size: var(--app-text-sm);
  color: var(--app-muted-fg);
}
.mk-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* dialogs */
.mk-dialog {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-xl);
  padding: 0;
  background: var(--app-card);
  color: var(--app-fg);
  box-shadow: var(--app-shadow-pop);
  width: min(440px, calc(100vw - 32px));
}
.mk-dialog__body {
  padding: 20px;
}
.mk-dialog__title {
  margin: 0 0 6px;
  font: 600 16px / 1.3 var(--app-font-sans);
}
.mk-dialog__text {
  margin: 0;
  color: var(--app-muted-fg);
}
.mk-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--app-border);
}
.mk-lb {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}
.mk-lb__panel {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(260px, 38fr);
  max-height: calc(100vh - 34px);
}
.mk-lb__img {
  background: var(--app-muted);
  display: grid;
  place-items: center;
  padding: 16px;
  min-height: 280px;
}
.mk-lb__img img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--app-radius-lg);
}
.mk-lb__side {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--app-border);
  overflow: auto;
}
.mk-lb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mk-lb__side .mk-textarea {
  flex: 1;
  min-height: 140px;
}

/* toasts */
.mk-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
}
.mk-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  background: var(--app-popover);
  color: var(--app-fg);
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--app-success);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-pop);
  animation: cx-pop-in var(--app-duration) var(--app-ease-out);
}
.mk-toast__icon {
  color: var(--app-success);
  margin-top: 1px;
}
.mk-toast--error {
  border-left-color: var(--app-danger);
}
.mk-toast--error .mk-toast__icon {
  color: var(--app-danger);
}
.mk-toast--info {
  border-left-color: var(--app-primary);
}
.mk-toast--info .mk-toast__icon {
  color: var(--app-primary);
}
.mk-toast__msg {
  flex: 1;
  line-height: 1.4;
  padding-top: 1px;
}
.mk-toast .cx-iconbtn {
  width: 24px;
  height: 24px;
}

/* login */
.mk-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
  align-content: center;
  padding: 16px;
}
.mk-login__card {
  width: 100%;
  margin: 0;
  padding: 28px 24px;
}
.mk-login__card .cx-brand {
  justify-content: center;
  margin-bottom: 18px;
}
.mk-login__title {
  margin: 0 0 4px;
  text-align: center;
  font: 600 20px / 1.25 var(--app-font-sans);
}
.mk-login__sub {
  margin: 0 0 20px;
  text-align: center;
  color: var(--app-muted-fg);
}
.mk-login__btns {
  display: grid;
  gap: 10px;
}
.mk-login__btns .cx-btn {
  width: 100%;
  min-height: 44px;
}
.mk-login__denied {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--app-radius-md);
  background: var(--app-danger-soft);
  color: var(--app-danger);
  font-size: var(--app-text-sm);
}
.mk-login__foot {
  margin-top: 20px;
  text-align: center;
  font-size: var(--app-text-sm);
}
.mk-login__foot a {
  color: var(--app-muted-fg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mk-soon {
  font-size: 11px;
  color: var(--app-muted-fg);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  padding: 2px 4px;
}

@media (max-width: 820px) {
  .mk-draft {
    grid-template-columns: 1fr;
  }
  .mk-draft__media {
    border-left: 0;
    border-top: 1px solid var(--app-border);
  }
  .mk-lb__panel {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .mk-lb__side {
    border-left: 0;
    border-top: 1px solid var(--app-border);
  }
  .mk-lb__img img {
    max-height: 44vh;
  }
}
@media (max-width: 720px) {
  .mk-wrap {
    padding: 0 16px;
  }
  .mk-main {
    padding-top: 16px;
  }
  .cx-phead__title {
    font-size: 22px;
  }
  .cx-phead__actions {
    width: 100%;
  }
  .cx-phead__actions .cx-btn {
    flex: 1;
  }
  .mk-toasts {
    top: 12px;
    bottom: auto;
    right: 16px;
  }
  .mk-day {
    min-height: 56px;
    padding: 6px 4px;
    gap: 3px;
  }
  .mk-day__fest,
  .mk-day__count {
    display: none;
  }
  .mk-cal {
    padding: 8px;
  }
  .mk-cal__grid {
    gap: 3px;
  }
  .mk-dot {
    width: 6px;
    height: 6px;
  }
  .mk-actions .cx-btn {
    min-height: 40px;
  }
  .mk-actions__sp {
    flex-basis: 100%;
    height: 0;
  }
  .mk-actions .cx-btn--primary {
    flex: 1 1 auto;
  }
  .mk-tab {
    padding: 0 10px;
  }
}
@media (max-width: 720px) {
  /* tabs overflow scrolls with an edge fade instead of wrapping (ui-ux-standard §5) */
  .mk-top .cx-tabs {
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
    padding-right: 24px;
  }
}