:root{--primary:#1677ff;--danger:#ff4d4f;--success:#52c41a;--warn:#faad14;--text:#111;--muted:#777;--line:#e8e8e8;--bg:#f5f6fa;--card:#fff;--radius:16px;--shadow:0 10px 30px rgba(15,35,80,.08)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#edf4ff,#f7f7f7);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text)}button,input,textarea{font:inherit}.demo-shell{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:18px 0}.phone{position:relative;width:min(375px,100vw);min-height:812px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden;border-radius:28px}.page{min-height:812px;padding:52px 16px 78px;background:linear-gradient(#fff,#fbfcff)}.status{position:absolute;top:0;left:0;right:0;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:12px;font-weight:700;background:rgba(255,255,255,.86);z-index:5}.header{position:absolute;top:28px;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #f1f1f1;z-index:5}.back,.right-act{position:absolute;border:0;background:transparent;color:var(--primary);font-size:15px}.back{left:10px}.right-act{right:12px}.title{font-size:17px;font-weight:800}.tabbar{position:absolute;bottom:0;left:0;right:0;height:58px;background:#fff;border-top:1px solid var(--line);display:flex;z-index:6}.tabbar button{flex:1;border:0;background:#fff;color:#666;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center}.tabbar button.active{color:var(--primary);font-weight:800}.card{background:var(--card);border:1px solid #edf1f7;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin:12px 0}.hero{width:100%;border:0;aspect-ratio:343/160;min-height:138px;border-radius:18px;background:linear-gradient(135deg,#07162f,#1c77ff);color:white;padding:16px;display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;overflow:hidden;text-align:left}.hero .emoji{width:86px;height:86px;border-radius:22px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:46px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));flex-shrink:0}.hero h2{margin:0;font-size:20px;line-height:1.2}.hero p{margin:6px 0 0;opacity:.86;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero small{grid-column:1/-1;opacity:.9}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.grid-card{border:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:20px 12px;min-height:116px;text-align:left}.grid-card .icon{font-size:34px}.grid-card b{display:block;margin-top:10px;font-size:17px}.grid-card span{font-size:12px;color:#777}.big-option{width:100%;border:1px solid #edf1f7;background:#fff;border-radius:18px;padding:20px;text-align:left;margin:12px 0;box-shadow:var(--shadow)}.big-option .icon{font-size:38px}.big-option b{display:block;font-size:18px;margin:8px 0}.muted{color:var(--muted);font-size:13px}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.pill,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:#edf4ff;color:var(--primary);font-size:12px;margin:4px 4px 4px 0;border:1px solid transparent}.tag.selected,.pill.hot{background:var(--primary);color:#fff}.pill.danger{background:#fff1f0;color:var(--danger)}.pill.success{background:#f0fff1;color:var(--success)}textarea{width:100%;min-height:118px;border:1px solid var(--line);border-radius:14px;padding:12px;resize:none;outline:none;background:#fbfbfb}.upload{min-height:112px;border:1.5px dashed #bdd7ff;border-radius:16px;background:#f8fbff;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--primary);margin:8px 0;overflow:hidden}.upload img{max-width:100%;max-height:180px;border-radius:12px}.btn{border:0;border-radius:14px;padding:12px 14px;background:#edf4ff;color:var(--primary);font-weight:800}.btn.primary{background:var(--primary);color:#fff;width:100%;box-shadow:0 8px 18px rgba(22,119,255,.25)}.btn.danger{background:#fff1f0;color:var(--danger)}.btn.ghost{background:#f6f7fb;color:#333}.btn:disabled{opacity:.45}.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.photo-main{height:300px;border-radius:18px;background:linear-gradient(135deg,#dfeaff,#fff0f6);display:flex;align-items:center;justify-content:center;font-size:88px;box-shadow:inset 0 0 80px rgba(22,119,255,.08);overflow:hidden}.photo-main img{width:100%;height:100%;object-fit:contain;background:#f7f9fc}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photo-card,.video-card{border:0;background:#fff;padding:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);text-align:left}.thumb{height:96px;display:flex;align-items:center;justify-content:center;font-size:42px;background:linear-gradient(135deg,#eef5ff,#fff);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.photo-card small,.video-card small{display:block;padding:7px;color:#666}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.video-thumb{height:120px;background:linear-gradient(135deg,#111827,#334155);color:#fff;display:flex;align-items:center;justify-content:center;font-size:42px}.list-item{border:0;background:#fff;width:100%;border-radius:14px;padding:14px;margin:8px 0;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);text-align:left}.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.price-card{position:relative;border:1.5px solid #edf1f7;border-radius:14px;background:#fff;padding:12px 8px;text-align:center}.price-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,119,255,.1)}.price-card b{font-size:18px}.hotmark{position:absolute;top:-9px;right:4px;background:var(--danger);color:#fff;border-radius:10px;padding:2px 6px;font-size:10px}.empty{padding:50px 20px;text-align:center;color:#999}.loading{position:absolute;inset:0;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:9}.spinner{width:34px;height:34px;border:4px solid #dcecff;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;top:48px;transform:translateX(-50%) translateY(-20px);background:rgba(0,0,0,.8);color:#fff;border-radius:999px;padding:10px 16px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;z-index:90}.modal.hidden{display:none}.modal-box{width:310px;background:#fff;border-radius:18px;padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.28)}.modal-box h3{margin:0 0 8px}.seg{display:flex;background:#f3f5f8;border-radius:12px;padding:4px;margin:10px 0}.seg button{flex:1;border:0;background:transparent;padding:8px;border-radius:10px}.seg button.active{background:#fff;color:var(--primary);font-weight:800}.debug{border:1px solid #ffd6d6;background:#fff7f7}.protocol{font-size:13px;line-height:1.7;color:#555}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f5f5f5;border-radius:6px;padding:1px 5px}.video-player{height:210px;border-radius:18px;background:radial-gradient(circle,#475569,#020617);color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:52px}.copy{user-select:all}.footer-note{text-align:center;color:#aaa;font-size:12px;margin-top:18px}
@media(max-width:420px){.demo-shell{padding:0}.phone{width:100vw;min-height:100vh;border-radius:0}.page{min-height:100vh}.status,.header,.tabbar{position:fixed}.toast{top:22px}.hero{border-radius:14px;grid-template-columns:72px 1fr;gap:10px;padding:12px}.hero .emoji{width:72px;height:72px;font-size:38px}.hero h2{font-size:18px}.hero p{font-size:12px}.price-grid{grid-template-columns:1fr 1fr 1fr}}
.preview-btn{border:0;padding:0;width:100%;cursor:pointer}.upload.has-preview{gap:8px;color:#666}.preview-strip{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:4px}.preview-strip img{width:82px;height:82px;object-fit:cover;border-radius:12px;border:1px solid #e5eefc}.image-modal{width:min(92vw,360px);padding:12px}.image-modal img{width:100%;max-height:70vh;object-fit:contain;border-radius:14px;background:#f6f8fb}.photo-main.preview-btn{background:#f7f9fc}
/* v202606241845: safer banner and purchase layout */
.hero{height:auto;min-height:156px;aspect-ratio:auto;grid-template-columns:1fr;gap:8px;align-items:start}.hero .emoji{width:64px;height:64px;font-size:36px}.hero h2{font-size:19px}.hero small{grid-column:auto}.purchase-section-title{margin:18px 0 8px}
@media(max-width:420px){.hero{grid-template-columns:1fr;min-height:148px}.hero .emoji{width:58px;height:58px;font-size:34px}}