.template-section { background:#f5f8f2; border-block:1px solid #e2e9dd; }
.template-section [hidden] { display:none!important; }
.template-tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid #cdded1; margin-bottom:24px; padding:0 0 1px; }
.template-tabs [role=tab] { background:transparent; border:0; border-bottom:3px solid transparent; padding:15px 20px; font:inherit; font-size:15px; color:#60766a; white-space:nowrap; cursor:pointer; }
.template-tabs [aria-selected=true] { border-bottom-color:#08664e; color:#08664e; font-weight:650; }
.template-tabs [role=tab]:focus-visible { outline:2px solid #278466; outline-offset:-4px; }
.template-preview-panel { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:32px; align-items:start; }
.template-paper { position:relative; height:610px; overflow:hidden; background:#fff; border:1px solid #d9e5dc; border-radius:12px; box-shadow:0 8px 28px #163b3308; }
.template-paper iframe { width:100%; height:100%; display:block; border:0; pointer-events:none; }
.template-preview-mask { position:absolute; inset:auto 0 0; height:175px; padding:70px 20px 20px; box-sizing:border-box; background:linear-gradient(transparent,#fff 42%,#fff); text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.template-preview-mask span { font-size:12px; color:#74877d; }
.template-preview-mask strong { font-size:16px; font-weight:550; }
.template-preview-mask button { margin:0; padding:4px; }
.template-preview-description { padding:16px 0; }
.template-preview-description .template-type { font-size:12px; color:#527767; margin:0 0 12px; }
.template-preview-description h3 { font-size:23px; margin:0 0 16px; }
.template-preview-description p { font-size:14px; line-height:1.9; color:#526c62; }
.template-preview-description ul { list-style:none; padding:5px 0 24px; display:grid; gap:12px; font-size:14px; }
.template-preview-description li::before { content:"✓"; color:#08664e; margin-right:10px; }
.template-package-note { border-top:1px solid #d9e5dc; padding-top:24px; }
.template-package-note strong { font-size:14px; }
.template-package-note span { font-size:12px; color:#60766a; }
@media(max-width:900px) { .template-preview-panel { grid-template-columns:minmax(0,1fr); gap:10px; }.template-preview-description { display:none; }.template-tabs [role=tab] { padding:14px 16px; }.template-paper { height:580px; } }
@media(max-width:520px) { .template-paper { height:550px; }.template-tabs { margin-inline:-4px; }.template-tabs [role=tab] { font-size:14px; padding:13px; }.template-preview-mask { height:165px; padding-top:60px; } }
.template-dialog [hidden] { display:none!important; }
.template-heading { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:36px; }
.template-heading h2 { margin:0 0 14px; }
.template-heading p { max-width:640px; color:#526c62; line-height:1.8; margin:0; }
.template-purchase { flex-shrink:0; text-align:right; }
.template-buy,.template-primary { border:1px solid #0d5946; border-radius:9px; background:#0d5946; color:#fff; padding:15px 25px; font-family:inherit; font-size:16px; font-weight:600; line-height:1.4; cursor:pointer; }
.template-buy { font-size:17px; font-weight:600; }
.template-buy { background:linear-gradient(135deg,#13785b,#07523e); box-shadow:0 5px 18px #0c68452b; animation:template-breathe 3s ease-in-out infinite; transition:filter .2s,transform .2s; }
.template-buy:hover { filter:brightness(1.12); animation-play-state:paused; transform:translateY(-2px); }
.template-buy:active { transform:translateY(0); }
@keyframes template-breathe { 0%,100% { box-shadow:0 5px 18px #0c68452b,0 0 0 0 #319d6a18; } 50% { box-shadow:0 7px 28px #0c68455c,0 0 0 7px #319d6a08; } }
@media(prefers-reduced-motion:reduce) { .template-buy { animation:none; transition:none; } }
.template-purchase small { display:block; margin-top:10px; color:#526c62; font-size:12px; }
.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.template-card { background:#fff; border:1px solid #d9e5dc; border-radius:12px; padding:28px; min-width:0; }
.template-card .template-type { color:#527767; font-size:12px; margin:0 0 13px; }
.template-card h3 { font-size:22px; margin:0 0 12px; color:#163b33; }
.template-card p { color:#526c62; font-size:14px; line-height:1.8; margin:0; }
.template-card ul { list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:20px 0 0; margin:0; }
.template-card li { font-size:12px; background:#f1f6f2; padding:5px 8px; border-radius:4px; color:#456958; }
.template-included { color:#526c62; font-size:13px; line-height:1.8; margin:22px 0 0; }
.template-dialog { width:min(510px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:32px; border:1px solid #d9e5dc; border-radius:18px; color:#163b33; background:#fff; box-shadow:0 24px 90px #112f3540; }
.template-dialog::backdrop { background:#102e285e; }
.template-dialog h2 { font-size:24px; margin:0 35px 8px 0; }
.template-close { position:absolute; top:18px; right:18px; width:36px; height:36px; border:0; border-radius:50%; background:#f1f5f1; font-size:24px; color:#526c62; cursor:pointer; }
.template-price { font-size:32px; font-weight:650; margin:20px 0 4px; }
.template-dialog .template-muted { color:#63786e; font-size:13px; line-height:1.75; margin:0; }
.template-channels { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0 16px; }
.template-channel { display:flex; align-items:center; justify-content:center; gap:9px; padding:15px; background:#fff; border:1px solid #d9e5dc; border-radius:9px; color:#163b33; font:inherit; cursor:pointer; }
.template-channel[aria-pressed=true] { border:2px solid #08664e; padding:14px; background:#f0f7f2; }
.template-channel:disabled { cursor:default; opacity:.55; }
.template-channel b { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:white; background:#1677ff; font-size:17px; }
.template-channel[data-channel=wechat] b { background:#07a45a; }
.template-status { font-size:14px; line-height:1.8; margin:18px 0; overflow-wrap:anywhere; }
.template-code { display:flex; flex-direction:column; align-items:center; gap:12px; min-height:80px; }
.template-code iframe { border:0; width:260px; height:290px; background:white; }
.template-code img { width:232px; height:232px; }
.template-qr-slot { position:relative; display:flex; align-items:center; justify-content:center; width:260px; min-height:290px; }
.template-qr-slot iframe,.template-qr-slot img { opacity:0; }
.template-qr-slot .is-loaded { opacity:1; }
.template-qr-slot iframe { opacity:1; }
.template-qr-loading { position:absolute; inset:29px 14px; display:grid; place-items:center; border:1px solid #dce9e1; border-radius:12px; color:#668275; font-size:13px; background:linear-gradient(110deg,#f1f6f2 25%,#fcfdfb 45%,#f1f6f2 65%); background-size:240% 100%; animation:template-qr-shimmer 1.6s ease-in-out infinite; }
.template-qr-loading[role=button] { cursor:pointer; }
/* The official cashier can paint its QR before all of its page resources finish. */
.template-qr-slot:has(iframe) .template-qr-loading { inset:auto 14px 0; height:30px; font-size:12px; pointer-events:none; }
@keyframes template-qr-shimmer { to { background-position:-170% 0; } }
@media(prefers-reduced-motion:reduce) { .template-qr-loading { animation:none; } }
.template-tools { display:flex; justify-content:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
.template-text-button { background:none; border:0; padding:8px 0; color:#08664e; text-decoration:underline; text-underline-offset:4px; font:inherit; font-size:13px; cursor:pointer; }
.template-download-link { display:block; text-align:center; text-decoration:none; margin-top:16px; }
.template-dialog button:focus-visible,.template-download-link:focus-visible { outline:3px solid #78ae98; outline-offset:4px; }
.template-recovery { border-top:1px solid #e3ebe5; padding-top:16px; margin-top:24px; font-size:12px; }
.template-recovery input { width:100%; box-sizing:border-box; padding:11px; margin-top:10px; border:1px solid #ceded2; border-radius:6px; }
@media(max-width:760px) { .template-heading { align-items:flex-start; gap:20px; } .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .template-card { padding:22px; } }
@media(max-width:520px) { .template-heading { flex-direction:column; } .template-purchase { text-align:left; } .template-grid { grid-template-columns:1fr; } .template-card h3 { font-size:20px; } .template-dialog { padding:25px; } }