.marketing-templates {
  --mt-bg: #f4f5f7;
  --mt-surface: #fff;
  --mt-text: #171717;
  --mt-muted: #737373;
  --mt-line: #e7e7e7;
  --mt-radius: 22px;
}

.marketing-templates, .marketing-templates * { box-sizing: border-box; }
.marketing-templates [hidden] { display: none !important; }
.marketing-templates {
  color: var(--mt-text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}
:where(.marketing-templates) .mt-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 22px; }
:where(.marketing-templates) .mt-categories { display: flex; flex-wrap: wrap; gap: 24px; }
:where(.marketing-templates) .mt-category, :where(.marketing-templates) .mt-search, :where(.marketing-templates) .mt-button, :where(.marketing-templates) .mt-close, :where(.marketing-templates) .mt-preview { font: inherit; }
:where(.marketing-templates) .mt-category { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 0; background: transparent; color: #737373; cursor: pointer; }
:where(.marketing-templates) .mt-category[aria-pressed="true"] { color: #171717; border-bottom-color: #171717; }
:where(.marketing-templates) .mt-search { width: 220px; border: 1px solid var(--mt-line); border-radius: 12px; background: #fff; padding: 10px 13px; outline: none; }
:where(.marketing-templates) .mt-search:focus { border-color: #171717; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
:where(.marketing-templates) .mt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
:where(.marketing-templates) .mt-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); background: var(--mt-surface); box-shadow: 0 5px 18px rgba(0,0,0,.045); }
:where(.marketing-templates) .mt-preview { display: block; width: 100%; padding: 0; border: 0; background: #eceef1; cursor: zoom-in; }
:where(.marketing-templates) .mt-preview:focus-visible, :where(.marketing-templates) .mt-button:focus-visible, :where(.marketing-templates) .mt-close:focus-visible, :where(.marketing-templates) .mt-category:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
:where(.marketing-templates) .mt-card-images, :where(.marketing-templates) .mt-modal-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
:where(.marketing-templates) .mt-card-images { padding: 8px; }
:where(.marketing-templates) .mt-image-slot { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 10px; background: #dedfe2; }
:where(.marketing-templates) .mt-image { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.marketing-templates) .mt-image-fallback { display: grid; place-items: center; width: 100%; height: 100%; padding: 7px; color: #777; background: repeating-linear-gradient(135deg,#ececec,#ececec 9px,#e5e5e5 9px,#e5e5e5 18px); font-size: 12px; line-height: 1.4; text-align: center; }
:where(.marketing-templates) .mt-card-body { padding: 14px 15px 16px; }
:where(.marketing-templates) .mt-card-title { margin: 0 0 7px; font-size: 16px; line-height: 1.4; }
:where(.marketing-templates) .mt-card-title, :where(.marketing-templates) .mt-modal-title, :where(.marketing-templates) .mt-modal-description { overflow-wrap: anywhere; }
:where(.marketing-templates) .mt-notice { color: var(--mt-muted); font-size: 13px; overflow-wrap: anywhere; }
:where(.marketing-templates) .mt-card-description { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mt-muted); font-size: 13px; line-height: 20px; }
:where(.marketing-templates) .mt-button { border-radius: 11px; padding: 9px 15px; cursor: pointer; }
:where(.marketing-templates) .mt-button-primary { border: 1px solid #171717; color: #fff; background: #171717; }
:where(.marketing-templates) .mt-button-secondary { border: 1px solid var(--mt-line); color: #333; background: #fff; }
:where(.marketing-templates) .mt-card-use { position: absolute; top: 16px; right: 16px; z-index: 1; opacity: 0; pointer-events: none; }
:where(.marketing-templates) .mt-card:hover .mt-card-use,
:where(.marketing-templates) .mt-card:focus-within .mt-card-use { opacity: 1; pointer-events: auto; }
:where(.marketing-templates) .mt-button:disabled { cursor: default; opacity: .55; }
:where(.marketing-templates) .mt-empty { padding: 72px 20px; border: 1px dashed #d6d6d6; border-radius: var(--mt-radius); color: var(--mt-muted); text-align: center; background: rgba(255,255,255,.65); }
:where(.marketing-templates) .mt-modal-layer { display: contents; }
:where(.marketing-templates) .mt-modal-layer[hidden] { display: none; }
:where(.marketing-templates) .mt-modal::backdrop { background: rgba(20,20,20,.30); }
:where(.marketing-templates) .mt-modal { position: fixed; inset: 0; margin: auto; border: 0; color: var(--mt-text); width: min(760px, calc(100% - 48px)); max-height: calc(100vh - 48px); overscroll-behavior: contain; overflow: auto; border-radius: 28px; background: #fff; padding: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.20); }
:where(.marketing-templates) .mt-close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #333; background: #f1f1f1; font-size: 24px; line-height: 1; cursor: pointer; }
:where(.marketing-templates) .mt-modal-title { margin: 0 48px 8px 0; font-size: 24px; }
:where(.marketing-templates) .mt-modal-description { margin: 0 48px 20px 0; color: var(--mt-muted); line-height: 1.7; }
:where(.marketing-templates) .mt-modal-images { gap: 12px; }
:where(.marketing-templates) .mt-modal-images .mt-image-slot { border-radius: 14px; }
:where(.marketing-templates) .mt-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

@media (max-width: 1040px) { :where(.marketing-templates) .mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { :where(.marketing-templates) .mt-toolbar { align-items: stretch; flex-direction: column; } :where(.marketing-templates) .mt-search { width: 100%; } :where(.marketing-templates) .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { :where(.marketing-templates) .mt-grid { grid-template-columns: 1fr; } :where(.marketing-templates) .mt-modal { padding: 22px 16px 18px; border-radius: 22px; } }