/* R236 店铺二维码&海报生成器 */
:root {
  --primary: #E87722; --secondary: #F4A261; --bg: #FFF8F0; --cta: #D35400;
  --text: #2D2D2D; --text-light: #666; --card-bg: #FFF; --border: #F0E0D0;
  --contact-footer-h: 92px; --bottom-nav-h: 52px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-chrome-h: calc(var(--contact-footer-h) + var(--bottom-nav-h));
  --em-entry-stack-h: 44px;
  --zw-fab-size: 56px;
  --float-gap: 12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;background:var(--bg);color:var(--text);line-height:1.5;padding-bottom:calc(var(--bottom-chrome-h) + 16px + var(--safe-area-bottom))}
body.share-page,body.invite-page{padding-bottom:calc(var(--contact-footer-h) + 16px + var(--safe-area-bottom))}
button,input,textarea{font:inherit;border:none;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

#skeleton .sk-hero{height:120px;margin:12px;background:#fde8dc;border-radius:16px;animation:shimmer 1.2s infinite}
#skeleton .sk-block{height:240px;margin:12px;background:#fde8dc;border-radius:14px;animation:shimmer 1.2s infinite}
@keyframes shimmer{0%,100%{opacity:.6}50%{opacity:1}}

.app-header{text-align:center;padding:16px 12px 8px;background:linear-gradient(180deg,rgba(232,119,34,.12),transparent)}
.app-header h1{font-size:1.25rem}
.app-sub{font-size:.85rem;color:var(--text-light);margin-top:4px}

.view-panel{padding:0 12px 16px;min-height:40vh}
.section-label{font-size:.9rem;font-weight:700;margin:12px 0 8px;color:var(--text)}
.field-label{display:block;margin-bottom:12px;font-size:.85rem;font-weight:600}
.field-input{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;margin-top:6px;background:var(--card-bg);color:var(--text)}
.field-input:focus{outline:2px solid var(--primary);outline-offset:1px}
.hint-text{font-size:.8rem;color:var(--text-light);margin-top:10px;text-align:center}

.shop-form{background:var(--card-bg);border-radius:16px;padding:16px;border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.logo-upload{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.logo-preview{width:64px;height:64px;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border)}
.logo-preview img{width:100%;height:100%;object-fit:cover}
.logo-emoji{font-size:2rem}

.qr-card{background:var(--card-bg);border-radius:16px;padding:20px;text-align:center;border:1px solid var(--border)}
.qr-preview-img,.qr-large-wrap{display:flex;justify-content:center;margin:12px 0}
.qr-img{border-radius:8px}
.qr-hint{font-size:.95rem;color:var(--text);margin:8px 0}
.qr-url-label{font-size:.75rem;color:var(--text-light);word-break:break-all}
.qr-mode-row{display:flex;flex-direction:column;gap:8px;margin:16px 0;text-align:left;font-size:.85rem}
.qr-mode-row label{display:flex;align-items:center;gap:8px}
.qr-placeholder{width:200px;height:200px;background:var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto;border-radius:12px;color:var(--text-light)}

.size-tabs{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.size-tab{padding:10px 14px;border-radius:12px;background:var(--card-bg);border:1px solid var(--border);white-space:nowrap;font-size:.85rem;min-width:88px}
.size-tab small{display:block;font-size:.7rem;color:var(--text-light);margin-top:2px}
.size-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.size-tab.active small{color:rgba(255,255,255,.85)}

.poster-preview-wrap{background:var(--card-bg);border-radius:16px;padding:12px;border:1px solid var(--border);text-align:center}
.poster-main,.poster-thumb{max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.1);opacity:0;transition:opacity .35s}
.poster-main.poster-ready,.poster-thumb.poster-ready{opacity:1}
.poster-actions{display:grid;gap:10px;margin-top:14px}
.size-card{margin-bottom:16px;text-align:center}
.size-card p{font-size:.8rem;color:var(--text-light);margin-top:6px}

.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:12px 0}
.preset-card{padding:18px 12px;border-radius:14px;border:2px solid var(--border);background:var(--card-bg);text-align:center;transition:transform .2s,border-color .2s}
.preset-card.active{border-color:var(--primary);background:rgba(232,119,34,.08);transform:scale(1.02)}
.preset-icon{font-size:2rem;display:block;margin-bottom:6px}
.preset-name{font-size:.9rem;font-weight:600}

.swatch-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.swatch{width:36px;height:36px;border-radius:50%;border:3px solid var(--card-bg);box-shadow:0 0 0 1px var(--border);background:var(--sw)}
.swatch.active{box-shadow:0 0 0 2px var(--primary)}

.profile-card{background:var(--card-bg);border-radius:16px;padding:16px;border:1px solid var(--border);display:grid;gap:10px}
.profile-card h3{margin-bottom:4px}
.version-line{font-size:.75rem;color:var(--text-light);text-align:center;margin-top:8px}
.print-accordion{background:var(--card-bg);border-radius:14px;padding:12px 16px;margin-bottom:12px;border:1px solid var(--border)}
.print-accordion summary{font-weight:700;cursor:pointer}
.dpi-note{font-size:.8rem;color:var(--text-light);margin:10px 0}
.guide-table{width:100%;border-collapse:collapse;font-size:.75rem;margin-top:8px}
.guide-table th,.guide-table td{border:1px solid var(--border);padding:6px;text-align:left}

.btn-cta{padding:12px 20px;border-radius:12px;background:var(--cta);color:#fff;font-weight:700;font-size:1rem;min-height:44px;width:100%}
.btn-outline,.btn-outline-sm{display:inline-block;padding:12px 16px;border-radius:12px;border:2px solid var(--primary);color:var(--primary);background:var(--card-bg);font-weight:600;text-align:center;width:100%}
.btn-outline-sm{padding:8px 14px;font-size:.85rem;width:auto}
.btn-outline.warn{border-color:#e74c3c;color:#e74c3c}

.bottom-nav{position:fixed;bottom:calc(var(--contact-footer-h) + var(--safe-area-bottom));left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card-bg);border-top:1px solid var(--border);z-index:80;padding:4px 0;min-height:var(--bottom-nav-h);box-shadow:0 -2px 8px rgba(0,0,0,.04)}
.bottom-nav button{min-height:44px;font-size:.72em;color:var(--text-light);padding:4px 2px}
.bottom-nav button.active{color:var(--primary);font-weight:700}

.contact-footer{position:fixed;left:0;right:0;bottom:0;background:#1a1a1a;border-top:1px solid rgba(255,255,255,.08);padding:.55rem .75rem calc(.55rem + var(--safe-area-bottom));z-index:850;min-height:var(--contact-footer-h)}
.contact-footer__btns{display:grid;grid-template-columns:repeat(3,minmax(0,88px));justify-content:center;gap:.4rem;max-width:320px;margin:0 auto}
.contact-footer__cta,.contact-footer__btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:.48rem .2rem;border-radius:6px;font-size:.72rem;line-height:1.2;white-space:nowrap;min-height:32px}
.contact-footer__cta{background:#c41e1e!important;color:#fff!important;font-weight:700;text-decoration:none}
.contact-footer__btn{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;text-decoration:none;cursor:pointer;font-family:inherit}
.contact-footer__brand{text-align:center;font-size:.62rem;color:rgba(255,255,255,.5);margin:.4rem 0 0;line-height:1.3;padding:0 8px}

.share-main,.invite-main{max-width:480px;margin:0 auto;padding:24px 16px}
.share-hero,.invite-card{background:var(--card-bg);border-radius:20px;padding:28px 20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.share-icon{font-size:56px;margin-bottom:12px}
.share-features{list-style:none;text-align:left;max-width:260px;margin:16px auto;font-size:.95rem}
.share-features li{margin:8px 0}
.share-qr-block{margin-top:20px}
.invite-steps{text-align:left;max-width:260px;margin:16px auto;font-size:.9rem}
.invite-steps li{margin:8px 0}
.invite-canvas{max-width:100%;height:auto;border-radius:12px;margin:12px 0}
.brand-line{font-size:.8rem;color:var(--text-light);margin-top:12px}

.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s}
.modal.open{pointer-events:auto;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal-sheet{position:relative;width:100%;max-width:480px;background:var(--card-bg);border-radius:16px 16px 0 0;padding:20px 16px 28px;transform:translateY(100%);transition:transform .3s}
.modal.open .modal-sheet{transform:translateY(0)}
.modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:var(--bg)}
.modal-sheet h3{margin-bottom:12px;padding-right:32px}
#modal-confirm{width:100%;margin-top:16px}
.onboard-list{padding-left:20px;text-align:left}
.onboard-list li{margin:8px 0}

.toast{
  position:fixed;left:50%;
  transform:translateX(-50%) translateY(12px);
  max-width:min(88vw,320px);width:max-content;
  padding:10px 18px;border-radius:10px;
  background:rgba(45,45,45,.92);color:#fff;
  font-size:.9rem;line-height:1.45;text-align:center;white-space:normal;word-break:break-word;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  z-index:2000;box-sizing:border-box;
}
/* 主页：Toast 在试玩入口上方，避免与 em-entry-btn 重叠 */
body.has-contact-footer:not(.share-page):not(.invite-page) .toast{
  bottom:calc(var(--bottom-chrome-h) + var(--float-gap) + var(--em-entry-stack-h) + 14px + var(--safe-area-bottom));
}
body.share-page.has-contact-footer .toast,
body.invite-page.has-contact-footer .toast{
  bottom:calc(var(--contact-footer-h) + 24px + var(--safe-area-bottom));
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:rgba(45,120,70,.95)}

/* editor-mode · 试玩入口 / 悬浮球 · 避开底栏+Tab（对齐 R235） */
body.has-contact-footer .em-entry-btn{
  bottom:calc(var(--bottom-chrome-h) + var(--float-gap) + var(--safe-area-bottom));
  z-index:860;
  max-width:calc(100vw - 88px);
  font-size:.78rem;
  padding:.48rem .95rem;
}
body.share-page.has-contact-footer .em-entry-btn,
body.invite-page.has-contact-footer .em-entry-btn{
  bottom:calc(var(--contact-footer-h) + 12px + var(--safe-area-bottom));
  max-width:calc(100vw - 88px);
}
body.editor-mode-active.has-contact-footer{
  padding-bottom:calc(var(--bottom-chrome-h) + 56px + var(--safe-area-bottom));
}
body.editor-mode-active.share-page.has-contact-footer,
body.editor-mode-active.invite-page.has-contact-footer{
  padding-bottom:calc(var(--contact-footer-h) + 56px + var(--safe-area-bottom));
}
body.has-contact-footer .zw-root .zw-fab{
  bottom:calc(var(--bottom-chrome-h) + 12px + var(--safe-area-bottom));
  right:12px;
  z-index:855;
}
body.share-page.has-contact-footer .zw-root .zw-fab,
body.invite-page.has-contact-footer .zw-root .zw-fab{
  bottom:calc(var(--contact-footer-h) + 12px + var(--safe-area-bottom));
  right:12px;
}
body.has-contact-footer .zw-root .zw-preview{
  bottom:calc(var(--bottom-chrome-h) + 20px + var(--safe-area-bottom));
}
body.share-page.has-contact-footer .zw-root .zw-preview,
body.invite-page.has-contact-footer .zw-root .zw-preview{
  bottom:calc(var(--contact-footer-h) + 56px + var(--safe-area-bottom));
}

/* 覆盖 chat-widget.css（后加载）· 主页含 Tab+试玩入口，悬浮球再上移 */
body[data-brand="shop-poster-qr"].has-contact-footer:not(.share-page):not(.invite-page) .zw-root .zw-fab{
  bottom:calc(var(--bottom-chrome-h) + var(--float-gap) + var(--em-entry-stack-h) + 10px + var(--safe-area-bottom));
  right:10px;
}
body[data-brand="shop-poster-qr"].share-page.has-contact-footer .zw-root .zw-fab,
body[data-brand="shop-poster-qr"].invite-page.has-contact-footer .zw-root .zw-fab{
  bottom:calc(var(--contact-footer-h) + var(--float-gap) + 52px + var(--safe-area-bottom));
  right:10px;
}
body[data-brand="shop-poster-qr"].has-contact-footer:not(.share-page):not(.invite-page) .zw-root .zw-preview{
  bottom:calc(var(--bottom-chrome-h) + var(--float-gap) + var(--em-entry-stack-h) + var(--zw-fab-size) + 16px + var(--safe-area-bottom));
}
body[data-brand="shop-poster-qr"].share-page.has-contact-footer .zw-root .zw-preview,
body[data-brand="shop-poster-qr"].invite-page.has-contact-footer .zw-root .zw-preview{
  bottom:calc(var(--contact-footer-h) + var(--float-gap) + 52px + var(--zw-fab-size) + 12px + var(--safe-area-bottom));
}
@media(max-width:767px){
  body[data-brand="shop-poster-qr"].has-contact-footer:not(.share-page):not(.invite-page) .zw-root .zw-fab{
    bottom:calc(var(--bottom-chrome-h) + var(--float-gap) + var(--em-entry-stack-h) + 16px + var(--safe-area-bottom));
  }
}

.editable-field{outline:2px dashed var(--primary);outline-offset:2px;border-radius:8px}

body[data-brand="shop-poster-qr"]{--primary:#E87722;--cta:#D35400}

@media(min-width:768px){
  .view-panel{max-width:520px;margin:0 auto}
  .preset-grid{grid-template-columns:repeat(4,1fr)}
  .bottom-nav{max-width:520px;left:50%;transform:translateX(-50%);border-radius:16px 16px 0 0}
}

@media print{
  .bottom-nav,.contact-footer,.em-entry-btn{display:none!important}
  body{padding-bottom:0}
}

/* R236 扩展组件 */
.qr-page .qr-card{padding:28px 16px}
.qr-large-wrap .qr-img{width:280px;height:280px}
.poster-css-fallback{min-height:200px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.about-text{font-size:.9rem;color:var(--text-light);padding:8px 0}
.app-header .preset-badge{display:inline-block;font-size:.75rem;background:var(--primary);color:#fff;padding:2px 10px;border-radius:20px;margin-top:6px}
.shop-form .field-label textarea{resize:vertical;min-height:72px}
.qr-mode-row input[type=radio]{accent-color:var(--primary)}
#btn-save-qr{margin-top:12px}
.poster-actions .btn-outline{margin-top:0}
.profile-card .btn-outline{margin-top:0}
.invite-card .btn-cta{margin-bottom:12px}
.share-hero .btn-outline{margin-top:10px}
.share-hero h1{font-size:1.2rem;margin-bottom:8px}
.share-hero p{font-size:.9rem;color:var(--text-light);margin-bottom:12px}
.modal-sheet #edit-modal-input{margin-top:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view-panel{animation:fadeUp .35s ease-out}
.preset-card:hover{border-color:var(--secondary)}
.size-tab:active{transform:scale(.98)}
.btn-cta:active,.btn-outline:active{transform:scale(.98)}
.poster-thumb{max-height:160px;object-fit:contain}
.guide-table th{background:var(--bg)}
.print-accordion[open] summary{margin-bottom:8px}
body.editor-mode-on .shop-form .field-input.editable-field{background:rgba(232,119,34,.05)}
#invite-poster-slot{margin-top:16px}
.invite-card h1{font-size:1.15rem;margin:8px 0}
@keyframes ctaPop{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.share-hero .btn-cta{animation:ctaPop 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .view-panel,.share-hero .btn-cta,#skeleton .sk-hero,#skeleton .sk-block{animation:none}
  .poster-main,.poster-thumb{transition:none}
}

/* R236 表单与预览增强 */
.shop-form .field-label:last-child{margin-bottom:0}
.field-input::placeholder{color:#aaa}
.qr-card .btn-outline{margin-top:8px}
.poster-preview-wrap canvas{display:block;margin:0 auto}
#view-poster .hint-text{padding:0 8px 8px}
#view-presets .section-label:first-child{margin-top:0}
#view-profile .print-accordion{margin-top:0}
.profile-card label.btn-outline{display:block;cursor:pointer}
.profile-card label.btn-outline input{display:none}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.app-header h1{letter-spacing:.02em}
.modal-sheet{padding-bottom:calc(28px + var(--safe-area-bottom))}
.toast.warn{background:rgba(180,80,20,.95)}
.shop-form{border-top:3px solid var(--primary)}
.qr-large-wrap{padding:16px;background:var(--bg);border-radius:16px}
.preset-grid .preset-card{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.size-card canvas{background:var(--bg);padding:8px;border-radius:12px}
.share-main .btn-cta,.invite-main .btn-cta{display:block}
.contact-footer__brand{line-height:1.3}
#view-shop .shop-form{margin-top:4px}
#view-qr .qr-card{margin-top:8px}
.poster-main{touch-action:pan-y}
.field-input[disabled]{opacity:.6;background:#f5f5f5}
.share-page .share-main,.invite-page .invite-main{padding-top:32px}
.bottom-nav button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.btn-cta:focus-visible,.btn-outline:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.guide-table td:first-child{font-weight:600}
.preset-name{line-height:1.3}

/* P2 增强 */
.p2-card{margin-bottom:12px}
.p2-desc{font-size:.8rem;color:var(--text-light);margin:-4px 0 8px}
.p2-card .btn-outline{margin-top:0}
.p2-poster-tools{display:grid;gap:10px;margin-top:10px}
.modal-hint{font-size:.85rem;color:var(--text-light);margin:8px 0 12px}
.modal-sheet textarea.field-input{margin-bottom:12px;resize:vertical;min-height:140px}
.modal-sheet-tall{max-height:90vh;overflow-y:auto;text-align:center}
.modal-sheet-tall .btn-outline{margin-top:8px}
.modal-sheet-tall .invite-canvas{max-width:100%;height:auto;margin:8px 0;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.12)}