:root { --green: #1dac4b; --green-dark: #168d3c; --green-soft: #eaf8ee; --ink: #17251e; --muted: #718078; --border: #e4ece6; }
body > .topbar { max-width: 1160px; margin: 0 auto; padding: 22px 28px 0; }
@media (max-width: 700px) { body > .topbar { align-items: flex-start; flex-wrap: wrap; gap: 14px; padding: 18px 18px 0; } .membership-nav { order: 3; width: 100%; gap: 14px; margin: 0; } .membership-nav a { font-size: 12px; } .membership-auth { margin-left: auto; } .membership-user { max-width: 160px; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #f9fbfa; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
.marketplace-main { max-width: 1240px; margin: 0 auto; padding: 42px 42px 80px; }
.marketplace-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 35px; }
.eyebrow { margin: 0 0 10px; color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
h1 { max-width: 720px; margin: 0; font-size: clamp(30px, 4vw, 47px); line-height: 1.08; letter-spacing: -.04em; }
.marketplace-hero p:not(.eyebrow) { max-width: 680px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.back-dashboard { color: var(--green-dark); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.back-dashboard:hover { text-decoration: underline; }
.marketplace-notice { min-height: 22px; margin-bottom: 13px; color: var(--green-dark); font-size: 14px; font-weight: 600; }
.marketplace-notice.error { color: #b42318; }
.marketplace-notice.success { color: var(--green-dark); }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.template-card { display: flex; flex-direction: column; min-height: 360px; padding: 0 22px 22px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(25, 55, 35, .055); overflow: hidden; }
.template-image { display: block; width: calc(100% + 44px); height: 220px; margin: 0 -22px 20px; object-fit: contain; background: #eaf8ee; }
.template-card-top { display: flex; align-items: center; gap: 9px; color: #819087; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.template-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--green-dark); background: var(--green-soft); font-size: 16px; }
.template-card h2 { margin: 18px 0 8px; font-size: 20px; letter-spacing: -.02em; }
.template-card code { width: fit-content; padding: 4px 8px; border-radius: 5px; color: var(--green-dark); background: var(--green-soft); font-size: 12px; font-weight: 700; }
.template-preview { min-height: 106px; margin: 16px 0; color: var(--muted); font-size: 13px; line-height: 1.65; white-space: pre-line; overflow: hidden; }
.template-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: 18px; }
.template-tags span { padding: 4px 8px; border: 1px solid #d8eddd; border-radius: 20px; color: var(--green-dark); background: #fbfffc; font-size: 11px; font-weight: 700; }
.copy-template { width: 100%; min-height: 40px; border: 0; border-radius: 8px; color: #fff; background: var(--green); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.copy-template:hover { background: var(--green-dark); transform: translateY(-1px); }
.copy-template:disabled { cursor: wait; opacity: .72; transform: none; }
.copy-template.imported { cursor: default; opacity: .58; background: #718078; }
.copy-template.loading::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid #ffffff77; border-top-color: #fff; border-radius: 50%; vertical-align: -2px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marketplace-main { padding: 38px 24px 60px; } }
@media (max-width: 600px) { .marketplace-hero { display: block; } .back-dashboard { display: inline-block; margin-top: 20px; } .template-grid { grid-template-columns: 1fr; } }