/* Template library */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.template-context { display: none; }
.templates-main { padding-bottom: 24px; }
.templates-hero { min-height: 440px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); align-items: center; gap: clamp(32px, 7vw, 96px); padding-block: 60px 58px; }
.templates-hero-copy { max-width: 620px; }
.templates-hero-copy .section-kicker { margin-bottom: 18px; }
.templates-hero-copy h1 { margin: 0; color: var(--ink); font-size: clamp(40px, 3.4vw, 50px); line-height: 1.23; letter-spacing: -.075em; }
.templates-hero-copy h1 span { color: #7972ca; }
.templates-hero-copy > p:not(.section-kicker) { max-width: 510px; margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.9; word-break: keep-all; }
.templates-hero-stats { display: flex; align-items: center; gap: 17px; margin-top: 30px; color: var(--muted); font-size: 10px; }
.templates-hero-stats b { margin-right: 4px; color: var(--ink-soft); font-family: var(--font-sans); font-size: 12px; }
.templates-hero-stats i { width: 3px; height: 3px; border-radius: 50%; background: #c8cbd2; }
.templates-hero-art { position: relative; min-height: 300px; perspective: 1000px; }
.hero-sheet { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.96); border-radius: 19px; background: #fff; box-shadow: 0 22px 58px rgba(37,43,62,.12), inset 0 1px 0 #fff; }
.hero-sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-sheet-back { width: 71%; height: 222px; top: 34px; right: 0; transform: rotate(7deg); }
.hero-sheet-front { width: 78%; height: 224px; top: 8px; left: 0; transform: rotate(-5deg); }
.hero-art-caption { position: absolute; right: 0; bottom: 6px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--paper); box-shadow: var(--shadow-soft); font-size: 9px; }
.hero-art-dot { width: 6px; height: 6px; border-radius: 50%; background: #83c4aa; box-shadow: 0 0 0 3px rgba(131,196,170,.13); }
.template-library { padding-top: 30px; padding-bottom: 102px; }
.library-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.library-heading-row .section-kicker { margin-bottom: 9px; }
.library-heading-row h2 { margin: 0; color: var(--ink); font-size: clamp(27px, 3vw, 36px); letter-spacing: -.06em; }
.library-description { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.template-result-count { margin: 0 0 4px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.library-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.category-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 650; cursor: pointer; transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); }
.filter-chip span { color: var(--muted-light); font-size: 9px; }
.filter-chip:hover { color: var(--ink-soft); background: var(--canvas-deep); }
.filter-chip.is-active { color: var(--ink); border-color: var(--line); background: var(--paper); box-shadow: 0 2px 6px rgba(39,43,58,.035); }
.template-search { width: min(100%, 250px); min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted-light); background: var(--paper); transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease; }
.template-search:focus-within { border-color: #aaa4db; box-shadow: 0 0 0 3px rgba(129,120,209,.11); }
.template-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.template-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.template-search input::placeholder { color: var(--muted-light); }
.template-search kbd { min-width: 18px; height: 19px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-light); font-family: inherit; font-size: 9px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; padding-top: 25px; }
.template-card, .home-template-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 19px; background: rgba(255,255,255,.62); box-shadow: 0 8px 24px rgba(44,48,67,.045), inset 0 1px 0 rgba(255,255,255,.94); backdrop-filter: blur(14px) saturate(145%); -webkit-backdrop-filter: blur(14px) saturate(145%); transform-style: preserve-3d; transition: transform 300ms var(--ease-out), border-color 260ms ease, box-shadow 300ms ease, background 260ms ease; }
.template-card::before, .home-template-card::before { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(220px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(255,255,255,.3), transparent 74%); transition: opacity 260ms ease; }
.template-card:hover, .home-template-card:hover { border-color: rgba(255,255,255,.94); background: rgba(255,255,255,.72); box-shadow: 0 16px 36px rgba(44,48,67,.09), inset 0 1px 0 rgba(255,255,255,.98); }
.template-card:hover::before, .home-template-card:hover::before { opacity: .72; }
.template-card.is-tilting:hover, .home-template-card.is-tilting:hover { transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-2px) translateZ(2px); }
.template-preview-button { position: relative; z-index: 1; width: 100%; display: block; padding: 10px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.62); background: rgba(242,244,249,.3); cursor: pointer; text-align: left; }
.template-preview-button:focus-visible { outline-offset: -4px; }
.liquid-template-visual { position: relative; display: grid; place-items: center; min-height: 196px; overflow: hidden; padding: 15px; border: 1px solid rgba(255,255,255,.76); border-radius: 12px; background: radial-gradient(ellipse at 15% 18%, rgba(223,221,255,.48), transparent 50%), radial-gradient(ellipse at 88% 84%, rgba(211,237,229,.44), transparent 46%), rgba(247,248,251,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 14px rgba(47,53,76,.045); }
.liquid-template-visual::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(155px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(255,255,255,.36), transparent 74%); transition: opacity 260ms ease; }
.template-card:hover .liquid-template-visual::after, .home-template-card:hover .liquid-template-visual::after { opacity: .72; }
.template-preview-image, .liquid-template-visual > img { display: block; width: 100%; max-height: 168px; aspect-ratio: 640 / 460; object-fit: contain; border: 1px solid rgba(255,255,255,.96); border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(35,40,57,.11); transition: transform 360ms var(--ease-out), box-shadow 360ms ease; }
.template-preview-button:hover .template-preview-image { transform: translateY(-2px) scale(1.012); box-shadow: 0 11px 27px rgba(35,40,57,.15); }
.liquid-preview-tag { position: absolute; z-index: 1; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.86); border-radius: 999px; color: #555b67; background: rgba(255,255,255,.72); box-shadow: 0 4px 13px rgba(43,49,66,.08), inset 0 1px 0 #fff; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); font-size: 8px; font-weight: 700; }
.liquid-preview-tag i { width: 5px; height: 5px; border-radius: 50%; background: #83bca2; box-shadow: 0 0 0 3px rgba(131,188,162,.14); }
.preview-zoom-hint { position: absolute; right: 20px; bottom: 19px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: #363943; background: rgba(255,255,255,.91); box-shadow: 0 4px 12px rgba(23,26,33,.08); font-size: 8px; font-weight: 700; opacity: 0; transform: translateY(3px); transition: opacity 200ms ease, transform 200ms var(--ease-out); }
.template-preview-button:hover .preview-zoom-hint, .template-preview-button:focus-visible .preview-zoom-hint { opacity: 1; transform: translateY(0); }
.template-preview-button, .template-card-body, .home-template-card-copy { position: relative; z-index: 1; }
.template-card-body { padding: 16px 17px 17px; }
.template-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.template-category-label { color: var(--muted); font-size: 9px; font-weight: 650; }
.product-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; color: #5c765e; background: #edf5ee; font-size: 8px; font-weight: 750; }
.product-badge.is-premium { color: #76652f; border-color: #eee7d3; background: #faf6e9; }
.template-card h3 { margin: 11px 0 5px; color: var(--ink); font-size: 16px; letter-spacing: -.045em; }
.template-card-description { min-height: 36px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; word-break: keep-all; }
.template-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.template-price { color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.template-price.is-free { color: #5f927b; }
.template-card-action { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-deep); font-size: 9px; font-weight: 750; }
.template-card-action span { font-size: 12px; transition: transform 200ms var(--ease-out); }
.template-preview-button:hover ~ .template-card-body .template-card-action span { transform: translateX(3px); }
.home-template-section { padding-top: 70px; padding-bottom: 30px; }
.home-template-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.home-template-heading .section-heading { margin: 0; }
.home-template-heading .section-heading h2 { margin-bottom: 10px; }
.home-template-heading .section-heading > p:last-child { max-width: 460px; }
.home-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.home-template-card { display: block; color: inherit; border-radius: 18px; }
.home-template-card:focus-visible { outline: 3px solid rgba(122,112,211,.4); outline-offset: 3px; }
.home-template-card .liquid-template-visual { min-height: 215px; margin: 10px 10px 0; }
.home-template-card .liquid-template-visual > img { max-height: 177px; }
.home-template-card-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 17px 17px; border-top: 1px solid rgba(255,255,255,.52); }
.home-template-card-copy > div > span { color: var(--muted); font-size: 9px; }
.home-template-card-copy h3 { margin: 4px 0 0; color: var(--ink); font-size: 15px; letter-spacing: -.04em; }
.home-free-badge { display: inline-flex; align-items: center; gap: 8px; color: #5f927b; font-size: 9px; font-weight: 750; }
.home-free-badge b { color: var(--muted-light); font-size: 13px; transition: transform 220ms var(--ease-out); }
.home-template-card:hover .home-free-badge b { transform: translate(2px,-2px); }
.empty-templates { padding: 70px 20px; color: var(--muted); text-align: center; }
.empty-templates > span { color: var(--muted-light); font-size: 28px; }
.empty-templates p { margin: 7px 0 12px; font-size: 12px; }
.empty-templates button { color: var(--accent-deep); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.premium-note { display: flex; align-items: center; gap: 18px; margin-bottom: 70px; padding: 24px 27px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.premium-note-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #e9e5d6; border-radius: 13px; color: #9b8345; background: #faf6e9; font-size: 17px; }
.premium-note .section-kicker { margin: 0 0 4px; color: #9b8345; font-size: 8px; }
.premium-note h2 { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: -.04em; }
.premium-note p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.premium-note-link { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--ink-soft); font-size: 9px; font-weight: 700; white-space: nowrap; }
.premium-note-link:hover { color: var(--accent-deep); }

/* Template details and safe replacement confirmation */
.template-dialog, .replace-dialog { max-height: min(90vh, 840px); padding: 0; border: 1px solid rgba(255,255,255,.86); border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 100px rgba(17,22,35,.24); }
.template-dialog { width: min(930px, calc(100vw - 36px)); overflow: auto; }
.template-dialog::backdrop, .replace-dialog::backdrop { background: rgba(25,28,37,.42); backdrop-filter: blur(5px); }
.dialog-dismiss { position: sticky; z-index: 5; top: 12px; height: 0; display: flex; justify-content: flex-end; padding: 12px 12px 0; }
.dialog-dismiss button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); background: var(--paper); box-shadow: 0 3px 12px rgba(30,35,48,.08); font-size: 20px; cursor: pointer; }
.template-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); min-height: 540px; }
.detail-preview-column { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 45px 28px 28px; background: var(--canvas); }
.detail-preview-head { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; color: var(--muted); font-size: 9px; font-weight: 700; }
.detail-device-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.detail-device-button { width: 31px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted-light); background: transparent; cursor: pointer; }
.detail-device-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.detail-device-button.is-active { color: var(--accent-deep); background: var(--accent-soft); }
.detail-preview-frame { width: min(100%, 270px); height: 390px; overflow: hidden; border: 7px solid #292a31; border-radius: 29px; background: var(--paper); box-shadow: 0 16px 44px rgba(26,29,40,.16); transition: width 380ms var(--ease-out), height 380ms var(--ease-out), border-radius 300ms var(--ease-out); }
.detail-preview-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-preview-frame.is-desktop { width: min(100%, 540px); height: 302px; border-width: 6px; border-radius: 15px; }
.detail-preview-frame.is-desktop img { object-fit: contain; background: #f7f8fa; }
.detail-preview-caption { width: 100%; margin: 13px 0 0; color: var(--muted-light); font-size: 8px; text-align: center; }
.detail-copy { display: flex; flex-direction: column; padding: 59px 32px 29px; }
.detail-topline { display: flex; align-items: center; gap: 8px; }
.detail-category { color: var(--muted); font-size: 9px; font-weight: 700; }
.detail-copy h2 { margin: 13px 0 7px; color: var(--ink); font-size: 27px; letter-spacing: -.06em; }
.detail-purpose { margin: 0; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.detail-description { margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.8; word-break: keep-all; }
.detail-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 14px 0; border-block: 1px solid var(--line); }
.detail-price-label { color: var(--muted); font-size: 9px; }
.detail-price-value { color: var(--ink); font-size: 14px; font-weight: 800; }
.detail-includes { margin-top: 19px; }
.detail-includes h3 { margin: 0 0 11px; color: var(--ink-soft); font-size: 10px; }
.detail-includes ul { display: grid; gap: 9px; margin: 0; padding: 0; color: var(--muted); list-style: none; font-size: 9px; }
.detail-includes li { display: flex; align-items: flex-start; gap: 8px; }
.detail-includes li::before { content: '✓'; color: #75a48d; font-weight: 800; }
.detail-availability { min-height: 30px; margin: 13px 0 3px; color: var(--muted-light); font-size: 8px; line-height: 1.6; }
.detail-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 14px; }
.detail-actions .button { width: 100%; min-height: 44px; font-size: 10px; }
.detail-actions .button:disabled { color: #98949b; background: #ececf0; box-shadow: none; cursor: not-allowed; opacity: 1; }
.detail-more { color: var(--muted); font-size: 8px; text-align: center; }
.replace-dialog { width: min(440px, calc(100vw - 32px)); padding: 29px; }
.replace-dialog-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent-deep); background: var(--accent-soft); font-size: 16px; }
.replace-dialog .section-kicker { margin: 0 0 7px; font-size: 8px; }
.replace-dialog h2 { margin: 0; color: var(--ink); font-size: 23px; letter-spacing: -.055em; }
.replace-dialog > p:not(.section-kicker) { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.85; word-break: keep-all; }
.replace-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 23px; }
.replace-actions .button { min-height: 40px; font-size: 9px; }
.restore-draft-button { color: var(--accent-deep) !important; }
.restore-draft-button:hover { color: var(--ink) !important; }
.restore-draft-button[hidden] { display: none; }
.template-editor-indicator { display: inline-flex; align-items: center; gap: 6px; margin-left: 3px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 8px; font-weight: 700; }

/* Distinct layouts in the working editor and exported preview */
.generated-page.template-creator { color: #f8f5f5; background: #211d25; }
.template-creator .generated-cover { height: 136px; background: linear-gradient(115deg,#302534 0%,#493a4a 58%,#745e70 100%); }
.template-creator .generated-cover::before { left: 64%; top: -70px; border-color: rgba(243,224,239,.2); box-shadow: 0 0 0 21px rgba(255,255,255,.05),0 0 0 44px rgba(255,255,255,.035); }
.template-creator .generated-content { max-width: none; margin: 0; padding: 18px 20px 20px; text-align: left; }
.template-creator .generated-intro { display: grid; grid-template-columns: 1fr; }
.template-creator .generated-avatar { display: none; }
.template-creator .template-context { display: block; color: #c8b6c9; }
.template-creator .generated-name { color: #fff; font-family: Georgia,serif; font-size: 21px; }
.template-creator .generated-bio { max-width: none; min-height: 0; margin: 5px 0 0; color: #bbb2bf; font-size: 10px; }
.template-creator .generated-links { margin-top: 16px; }
.template-creator .generated-link { color: #f9f6f8; border-color: #514853; background: #352e39; box-shadow: none; }
.template-creator .generated-link:first-child { color: #332d37; border-color: #f6f1f7; background: #f6f1f7; }
.template-creator .generated-link-icon { color: #d7c4dc; background: #54475a; }
.template-creator .generated-link-title { font-size: 10px; }
.template-creator .generated-footer, .template-creator .generated-footer b { color: #a99cae; }

.generated-page.template-portfolio { color: #1c2b31; background: #f7f9f9; }
.template-portfolio .generated-cover { height: 46px; background: #e8f0f1; }
.template-portfolio .generated-cover::before { left: 83%; top: -148px; border-color: rgba(255,255,255,.75); }
.template-portfolio .generated-content { max-width: none; margin: 0; padding: 18px 20px 20px; text-align: left; }
.template-portfolio .generated-intro { display: grid; grid-template-columns: 1fr; }
.template-portfolio .generated-avatar { display: none; }
.template-portfolio .template-context { display: block; color: #6f9aab; }
.template-portfolio .generated-name { margin: 7px 0 3px; color: #17252b; font-family: Georgia,serif; font-size: 25px; font-weight: 700; }
.template-portfolio .generated-bio { max-width: 270px; min-height: 0; margin: 0; color: #65767d; font-size: 10px; }
.template-portfolio .generated-links { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 17px; }
.template-portfolio .generated-link { min-height: 62px; flex-wrap: wrap; align-content: center; gap: 4px 7px; border-color: #e5ebec; border-radius: 7px; color: #23343a; background: #fff; box-shadow: none; }
.template-portfolio .generated-link-icon { color: #537f8e; background: #eaf2f3; }
.template-portfolio .generated-link-title { width: calc(100% - 35px); font-family: Georgia,serif; font-size: 9px; white-space: normal; }
.template-portfolio .generated-footer { color: #7b9dac; }

.generated-page.template-cafe { color: #47382c; background: #fbf7ef; }
.template-cafe .generated-cover { height: 122px; background: linear-gradient(110deg,#eadcc6,#f5eddd 58%,#d6c1a2); }
.template-cafe .generated-cover::before { left: 69%; top: -110px; border-color: rgba(255,255,255,.75); box-shadow: 0 0 0 21px rgba(255,255,255,.18),0 0 0 44px rgba(255,255,255,.12); }
.template-cafe .generated-content { max-width: none; margin: -12px 0 0; padding: 0 19px 20px; text-align: left; }
.template-cafe .generated-intro { display: grid; grid-template-columns: 1fr; }
.template-cafe .generated-avatar { display: none; }
.template-cafe .template-context { display: block; color: #9a7856; }
.template-cafe .generated-name { margin: 8px 0 4px; color: #47372b; font-family: Georgia,serif; font-size: 19px; }
.template-cafe .generated-bio { max-width: none; min-height: 0; margin: 0; color: #7d6d5e; font-size: 9px; }
.template-cafe .generated-links { margin-top: 13px; }
.template-cafe .generated-link { min-height: 43px; border-color: #eee5d7; border-radius: 8px; color: #54483c; background: #fffdf8; box-shadow: none; }
.template-cafe .generated-link-icon { color: #987a59; background: #f3eadc; }
.template-cafe .generated-footer { color: #aa9883; text-align: center; }

.generated-page.template-beauty { color: #584b4d; background: #fcf9f8; }
.template-beauty .generated-cover { height: 119px; background: linear-gradient(120deg,#604a4e,#8b7072 65%,#c7acae); }
.template-beauty .generated-cover::before { left: 72%; top: -104px; border-color: rgba(255,244,241,.55); }
.template-beauty .generated-content { max-width: none; margin: -4px 0 0; padding: 0 20px 20px; text-align: center; }
.template-beauty .generated-intro { display: grid; grid-template-columns: 1fr; }
.template-beauty .generated-avatar { display: none; }
.template-beauty .template-context { display: block; color: #9b7d80; }
.template-beauty .generated-name { margin: 7px 0 4px; color: #59484a; font-family: Georgia,serif; font-size: 18px; }
.template-beauty .generated-bio { max-width: 235px; min-height: 0; margin: 0 auto; color: #8f8081; font-size: 9px; }
.template-beauty .generated-links { margin-top: 14px; }
.template-beauty .generated-link { min-height: 42px; border-color: #eee4e3; border-radius: 8px; color: #5d4b4d; background: #fff; box-shadow: none; }
.template-beauty .generated-link:first-child { justify-content: center; border-color: #71585c; color: #fff; background: #71585c; }
.template-beauty .generated-link:first-child .generated-link-icon, .template-beauty .generated-link:first-child .generated-link-arrow { display: none; }
.template-beauty .generated-link-title { text-align: center; }
.template-beauty .generated-footer { color: #a99697; }

.generated-page.template-brand { color: #344235; background: #f4f6f0; }
.template-brand .generated-cover { height: 103px; background: linear-gradient(110deg,#dce6d6,#edf1e7 62%,#b9ccb4); }
.template-brand .generated-cover::before { left: 76%; top: -126px; border-color: rgba(255,255,255,.7); }
.template-brand .generated-content { max-width: none; margin: -16px 0 0; padding: 0 20px 20px; text-align: left; }
.template-brand .generated-intro { display: grid; grid-template-columns: 1fr; }
.template-brand .generated-avatar { width: 49px; height: 49px; margin: 0; border: 3px solid #f4f6f0; border-radius: 15px; color: #fff; background: #75906e; font-size: 18px; }
.template-brand .template-context { display: block; margin-top: 8px; color: #71846c; }
.template-brand .generated-name { margin: 4px 0; color: #2d3d31; font-family: Georgia,serif; font-size: 21px; }
.template-brand .generated-bio { max-width: 260px; min-height: 0; margin: 0; color: #687765; font-size: 9px; }
.template-brand .generated-links { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 15px; }
.template-brand .generated-link { min-height: 55px; border-color: #e3e9df; border-radius: 7px; color: #3c4a3f; background: #eef1e9; box-shadow: none; }
.template-brand .generated-link-icon { color: #67805f; background: #dce6d6; }
.template-brand .generated-link-title { font-size: 8px; white-space: normal; }
.template-brand .generated-footer { color: #82907e; }

.device-frame.is-mobile .template-portfolio .generated-links, .device-frame.is-mobile .template-brand .generated-links { grid-template-columns: 1fr; }

:root[data-color-scheme="dark"] .template-card, :root[data-color-scheme="dark"] .home-template-card { border-color: rgba(255,255,255,.11); background: rgba(31,34,43,.66); box-shadow: 0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.07); }
:root[data-color-scheme="dark"] .template-card:hover, :root[data-color-scheme="dark"] .home-template-card:hover { border-color: rgba(255,255,255,.2); background: rgba(36,39,49,.78); }
:root[data-color-scheme="dark"] .template-card::before, :root[data-color-scheme="dark"] .home-template-card::before { background: radial-gradient(220px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(255,255,255,.11), transparent 74%); }
:root[data-color-scheme="dark"] .premium-note { border-color: var(--line); background: var(--paper); }
:root[data-color-scheme="dark"] .template-preview-button { border-color: var(--line); background: #242731; }
:root[data-color-scheme="dark"] .filter-chip.is-active { border-color: var(--line-strong); background: #242731; }
:root[data-color-scheme="dark"] .filter-chip:hover { background: #252933; }
:root[data-color-scheme="dark"] .template-search { border-color: var(--line-strong); background: #242731; }
:root[data-color-scheme="dark"] .template-search:focus-within { border-color: #8881cb; }
:root[data-color-scheme="dark"] .template-search kbd, :root[data-color-scheme="dark"] .template-dialog, :root[data-color-scheme="dark"] .replace-dialog { border-color: var(--line-strong); background: var(--paper); }
:root[data-color-scheme="dark"] .detail-preview-column { background: #1a1d25; }
:root[data-color-scheme="dark"] .detail-device-switch, :root[data-color-scheme="dark"] .dialog-dismiss button { border-color: var(--line-strong); background: #242731; }
:root[data-color-scheme="dark"] .dialog-dismiss button { color: var(--ink); }
:root[data-color-scheme="dark"] .detail-device-button.is-active { color: #d4d0ff; background: #343148; }
:root[data-color-scheme="dark"] .detail-actions .button:disabled { color: #898b94; background: #333640; }
:root[data-color-scheme="dark"] .replace-dialog-icon { border-color: var(--line-strong); }
:root[data-color-scheme="dark"] .template-editor-indicator { border-color: var(--line-strong); background: #242731; }

@media (max-width: 980px) {
  .templates-hero { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 34px; }
  .templates-hero-art { min-height: 260px; }
  .hero-sheet-front { height: 194px; }
  .hero-sheet-back { height: 195px; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
  .home-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-detail { grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr); }
  .detail-copy { padding-inline: 24px; }
}
@media (max-width: 760px) {
  .home-template-section { padding-top: 50px; }
  .home-template-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .home-template-grid { grid-template-columns: 1fr; gap: 13px; }
  .home-template-card .liquid-template-visual { min-height: 205px; }
  .home-template-card .liquid-template-visual > img { max-height: 168px; }
  .liquid-template-visual { min-height: 188px; padding: 12px; }
  .template-preview-image, .liquid-template-visual > img { max-height: 158px; }
  .templates-hero { min-height: auto; grid-template-columns: 1fr; gap: 22px; padding-block: 49px 32px; }
  .templates-hero-copy h1 { font-size: clamp(38px, 9vw, 52px); }
  .templates-hero-copy > p:not(.section-kicker) { font-size: 12px; }
  .templates-hero-stats { gap: 10px; margin-top: 22px; font-size: 8px; }
  .templates-hero-art { width: min(100%, 450px); min-height: 228px; margin: 0 auto; }
  .hero-sheet-front { height: 182px; }
  .hero-sheet-back { height: 181px; }
  .hero-art-caption { bottom: 0; font-size: 8px; }
  .template-library { padding-top: 27px; padding-bottom: 65px; }
  .library-heading-row { align-items: flex-start; }
  .library-heading-row h2 { font-size: 27px; }
  .library-controls { align-items: stretch; flex-direction: column-reverse; gap: 12px; margin-top: 21px; }
  .template-search { width: 100%; }
  .category-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .category-filter::-webkit-scrollbar { display: none; }
  .filter-chip { flex: 0 0 auto; min-height: 34px; padding-inline: 10px; }
  .template-grid { gap: 13px; padding-top: 17px; }
  .template-card { border-radius: 15px; }
  .template-preview-button { padding: 7px; }
  .template-preview-image { border-radius: 9px; }
  .template-card-body { padding: 12px; }
  .template-card h3 { margin-top: 8px; font-size: 13px; }
  .template-card-description { min-height: 48px; font-size: 9px; }
  .template-card-bottom { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 11px; padding-top: 10px; }
  .template-card-action { font-size: 8px; }
  .premium-note { align-items: flex-start; gap: 12px; margin-bottom: 45px; padding: 18px 16px; }
  .premium-note-mark { width: 33px; height: 33px; border-radius: 10px; font-size: 14px; }
  .premium-note h2 { font-size: 13px; line-height: 1.5; }
  .premium-note p:last-child { font-size: 8px; }
  .premium-note-link { display: none; }
  .template-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 19px; }
  .template-detail { grid-template-columns: 1fr; }
  .detail-preview-column { min-height: 405px; padding: 40px 17px 22px; }
  .detail-preview-frame { width: min(100%, 232px); height: 316px; }
  .detail-preview-frame.is-desktop { width: min(100%, 600px); height: 205px; }
  .detail-copy { padding: 25px 23px 22px; }
  .detail-copy h2 { margin-top: 9px; font-size: 23px; }
  .detail-description { margin-top: 8px; }
  .detail-price-row { margin-top: 15px; }
  .detail-includes { margin-top: 14px; }
  .detail-actions { padding-top: 9px; }
  .replace-dialog { padding: 23px; border-radius: 20px; }
}
@media (max-width: 420px) {
  .section-wrap { width: min(100% - 36px, 900px); }
  .home-template-section { padding-top: 38px; }
  .home-template-card .liquid-template-visual { min-height: 196px; margin: 8px 8px 0; padding: 12px; }
  .home-template-card .liquid-template-visual > img { max-height: 156px; }
  .template-grid { grid-template-columns: 1fr; }
  .liquid-template-visual { min-height: 196px; }
  .template-preview-image { max-height: 158px; }
  .template-card-body { padding: 14px; }
  .template-card-description { min-height: 0; }
  .template-card-bottom { align-items: center; flex-direction: row; }
  .templates-hero-stats { gap: 8px; font-size: 7px; }
  .templates-hero-stats b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .template-card, .template-preview-image, .detail-preview-frame, .preview-zoom-hint { transition-duration: .01ms !important; }
}
@media (max-width: 760px) {
  .template-card, .home-template-card, .liquid-preview-tag { backdrop-filter: blur(8px) saturate(125%); -webkit-backdrop-filter: blur(8px) saturate(125%); }
}

.test-checkout-dialog { position: fixed; width: min(460px, calc(100vw - 32px)); max-height: min(90vh, 720px); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.86); border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 100px rgba(17,22,35,.24); }
.test-checkout-dialog::backdrop { background: rgba(25,28,37,.48); backdrop-filter: blur(5px); }
.test-checkout-content { display: grid; gap: 12px; padding: 34px; }
.test-checkout-content .section-kicker { margin: 0; color: var(--ink-soft); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.test-checkout-content h2 { margin: 0; font-size: 25px; letter-spacing: -.05em; }
.test-checkout-product { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 3px 0 6px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); font-size: 13px; }
.test-checkout-product strong { font-size: 15px; }
.test-checkout-disclaimer span, .test-checkout-status { margin: 0; font-size: 10px; line-height: 1.7; }
.test-checkout-disclaimer { display: grid; gap: 3px; margin-top: 3px; padding: 12px 13px; border: 1px solid rgba(150,133,71,.18); border-radius: 12px; color: var(--ink-soft); background: rgba(250,246,233,.72); font-size: 10px; line-height: 1.65; }
.test-checkout-disclaimer strong { color: #756637; font-size: 10px; }
.test-checkout-status { min-height: 18px; color: var(--ink-soft); }
.test-checkout-submit { width: 100%; }
.test-checkout-submit:disabled { cursor: wait; opacity: .65; }

.payment-result-main { display: grid; min-height: min(68vh, 700px); place-items: center; padding-block: 68px; }
.payment-result-card { width: min(100%, 620px); display: grid; justify-items: center; padding: clamp(28px, 6vw, 54px); border: 1px solid var(--line); border-radius: 26px; background: var(--paper); box-shadow: 0 24px 80px rgba(25,30,42,.08); text-align: center; }
.payment-result-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(80,130,100,.2); border-radius: 17px; color: #41785e; background: rgba(234,246,238,.86); font-size: 24px; font-weight: 650; }
.payment-result-card.is-test-failure .payment-result-mark { color: #965f5c; border-color: rgba(150,95,92,.2); background: rgba(250,238,237,.86); }
.payment-result-card .section-kicker { margin: 0 0 11px; color: var(--ink-soft); font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.payment-result-card h1 { max-width: 490px; margin: 0; font-size: clamp(26px, 5vw, 38px); line-height: 1.2; letter-spacing: -.055em; }
.payment-result-description { max-width: 470px; margin: 13px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.payment-result-product { width: 100%; display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); font-size: 12px; }
.payment-result-notice { margin: 18px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.payment-result-actions { width: 100%; display: flex; justify-content: center; gap: 10px; margin-top: 23px; }
.payment-result-actions .button { min-height: 44px; font-size: 11px; }

:root[data-color-scheme="dark"] .test-checkout-dialog { border-color: var(--line-strong); background: var(--paper); }
:root[data-color-scheme="dark"] .test-checkout-product { border-color: var(--line-strong); background: #242731; }
:root[data-color-scheme="dark"] .test-checkout-disclaimer { border-color: rgba(189,171,104,.22); background: rgba(104,88,45,.17); }
:root[data-color-scheme="dark"] .test-checkout-disclaimer strong { color: #d2c385; }
:root[data-color-scheme="dark"] .payment-result-card { border-color: var(--line); background: var(--paper); box-shadow: 0 24px 80px rgba(0,0,0,.2); }
:root[data-color-scheme="dark"] .payment-result-product { border-color: var(--line-strong); background: #242731; }

@media (max-width: 600px) {
  .test-checkout-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 19px; }
  .test-checkout-content { padding: 29px 22px 22px; }
  .payment-result-main { min-height: 64vh; padding-block: 42px; }
  .payment-result-card { padding: 30px 22px; border-radius: 21px; }
  .payment-result-actions { flex-direction: column; }
  .payment-result-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
}