/* Template center: shared alignment and restrained brand hierarchy. */
.mk-template-shell {
  --catalog-width: min(1440px, calc(100% - 64px));
  --catalog-ink: oklch(0.28 0.045 250);
  --catalog-muted: oklch(0.51 0.025 250);
  --catalog-line: oklch(0.91 0.014 240);
  --catalog-blue: oklch(0.53 0.13 240);
}
.mk-template-shell .mk-template-page { padding-top: 0; }
.mk-template-shell .mk-template-introduction {
  width: var(--catalog-width); margin: 0 auto; padding: 44px 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.mk-template-shell .mk-template-introduction h1 {
  margin: 0; color: var(--catalog-ink); font-size: 32px; line-height: 1.4; letter-spacing: -.02em;
}
.mk-template-shell .mk-template-introduction p { margin: 10px 0 0; color: var(--catalog-muted); font-size: 14px; line-height: 1.7; }
.mk-template-shell .mk-template-introduction > a { color: var(--catalog-blue); font-size: 13px; white-space: nowrap; text-decoration: none; }
.mk-template-shell .mk-template-introduction > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mk-template-shell .mk-template-type-switcher {
  width: var(--catalog-width); margin: 0 auto; padding: 0; gap: 28px;
  border-bottom: 1px solid var(--catalog-line); border-radius: 0; background: transparent;
}
.mk-template-shell .mk-template-type-btn,
.mk-template-shell .mk-template-type-btn:hover,
.mk-template-shell .mk-template-type-btn.is-active {
  position: relative; padding: 0 2px 16px; min-height: 48px; border: 0; border-radius: 0;
  color: var(--catalog-muted); background: transparent; box-shadow: none; transform: none;
}
.mk-template-shell .mk-template-type-btn.is-active { color: var(--catalog-blue); }
.mk-template-shell .mk-template-type-btn.is-active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px;
  background: var(--catalog-blue); border-radius: 3px 3px 0 0;
}
.mk-template-shell .mk-template-type-icon { width: 18px; height: 18px; }
.mk-template-shell .mk-template-type-badge,
.mk-template-shell .mk-template-type-btn:not(.is-active) .mk-template-type-badge {
  margin-left: 7px; padding: 2px 7px; color: var(--catalog-muted); background: oklch(0.94 0.012 240); font-size: 11px;
}
.mk-template-shell .mk-template-type-btn.is-active .mk-template-type-badge { color: var(--catalog-blue); background: oklch(0.94 0.035 235); }
.mk-template-shell .mk-cases-showcase { padding: 0 0 36px; background: transparent; }
.mk-template-shell .mk-template-toolbar {
  width: var(--catalog-width); margin: 0 auto; padding: 24px 0; gap: 12px;
  border-bottom: 1px solid var(--catalog-line);
}
.mk-template-shell .mk-template-filter-row { gap: 18px; }
.mk-template-shell .mk-template-filter-label { min-width: 30px; padding-top: 3px; color: var(--catalog-muted); font-size: 13px; line-height: 28px; }
.mk-template-shell .mk-template-toolbar .mk-template-filters { gap: 5px 7px; }
.mk-template-shell .mk-template-toolbar .mk-template-filters button { min-height: 32px; padding: 5px 11px; font-weight: 500; border-radius: 6px; color: var(--catalog-muted); }
.mk-template-shell .mk-template-toolbar .mk-template-filters button.is-active { color: var(--catalog-blue); background: oklch(0.94 0.03 235); font-weight: 650; }
.mk-template-shell .mk-template-search { width: min(440px, 100%); margin: 6px 0 0 48px; }
.mk-template-shell .mk-template-search input { height: 42px; background: oklch(0.995 0.002 240); border-color: var(--catalog-line); border-radius: 8px; }
.mk-template-shell .mk-template-gallery { width: var(--catalog-width); margin: 28px auto 0; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-template-shell .mk-template-showcase-card { border-color: var(--catalog-line); box-shadow: none; }
.mk-template-shell .mk-template-showcase-card:hover { border-color: oklch(0.75 0.065 240); box-shadow: 0 8px 24px oklch(0.3 0.035 240 / .07); }
.mk-template-shell .mk-mini-templates-container { width: var(--catalog-width); }
.mk-template-shell .mk-template-directory { width: var(--catalog-width); margin: 12px auto 0; padding: 28px 0 48px; }
.mk-template-shell .mk-template-directory nav { gap: 12px 28px; }
.mk-template-shell .mk-template-directory a { font-size: 13px; text-decoration: none; }
.mk-template-shell .mk-template-directory a:hover { text-decoration: underline; }
.mk-template-shell .mk-template-type-btn:focus-visible,
.mk-template-shell .mk-template-toolbar button:focus-visible { outline: 2px solid var(--catalog-blue); outline-offset: 3px; }
@media (max-width: 767px) {
  .mk-template-shell { --catalog-width: calc(100% - 32px); }
  .mk-template-shell .mk-template-introduction { padding: 28px 0 22px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .mk-template-shell .mk-template-introduction h1 { font-size: 26px; }
  .mk-template-shell .mk-template-type-switcher { gap: 22px; }
  .mk-template-shell .mk-template-type-btn { font-size: 13px; }
  .mk-template-shell .mk-template-toolbar { padding: 20px 0; }
  .mk-template-shell .mk-template-filter-row { display: flex; width: 100%; gap: 8px; flex-direction: row; }
  .mk-template-shell .mk-template-toolbar .mk-template-filters { width: 0; flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
  .mk-template-shell .mk-template-filter-label { min-width: 30px; }
  .mk-template-shell .mk-template-search { width: 100%; margin-left: 0; }
  .mk-template-shell .mk-template-gallery { gap: 18px; }
}

@media (max-width: 1199px) and (min-width: 900px) { .mk-template-shell .mk-template-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) and (min-width: 640px) { .mk-template-shell .mk-template-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .mk-template-shell .mk-template-gallery { grid-template-columns: 1fr; } }