*{box-sizing:border-box;margin:0;padding:0;}
:root{--p:#7C6FF7;--pd:#4A44B5;--pl:#EEEDFE;--teal:#2BBFA4;--coral:#F27059;--tx:#1A1A2E;--ts:#6B6B8A;--th:#A0A0BE;--bd:rgba(124,111,247,.15);--r:14px;--rs:10px;--font:'Inter',system-ui,sans-serif;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:var(--font);background:#F7F6FF;color:var(--tx);-webkit-font-smoothing:antialiased;min-height:100vh;}
button,a{-webkit-tap-highlight-color:transparent;}
.cb:active,.opt:active,.nav-btn:active,.big-btn:active:not(:disabled),.reset-btn:active,.lang-btn:active{transform:scale(0.97);}

/* Language toggle */
.lang-bar{position:fixed;top:12px;left:12px;z-index:999;display:flex;gap:6px;}
.lang-btn{padding:6px 14px;border-radius:999px;border:1.5px solid var(--bd);background:white;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--ts);box-shadow:0 2px 8px rgba(0,0,0,.08);font-family:var(--font);}
.lang-btn.active{background:var(--p);color:white;border-color:var(--p);}
.lang-btn:hover:not(.active){border-color:var(--p);color:var(--p);}

.wrap{max-width:680px;margin:0 auto;padding:4rem 1rem 4rem;width:100%;}
.hero{text-align:center;margin-bottom:1.5rem;}
.badge{display:inline-flex;align-items:center;gap:5px;background:white;border:1px solid var(--bd);border-radius:999px;padding:5px 14px;font-size:12px;color:var(--p);font-weight:600;margin-bottom:10px;}
.hero h1{font-size:clamp(24px,5vw,36px);font-weight:700;line-height:1.2;margin-bottom:8px;letter-spacing:-.5px;}
.hero h1 em{color:var(--p);font-style:normal;}
.hero p{font-size:14px;color:var(--ts);line-height:1.7;max-width:480px;margin:0 auto;}

.steps-row{display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;}
.sdot{display:flex;flex-direction:column;align-items:center;gap:3px;}
.sci{width:30px;height:30px;border-radius:50%;border:2px solid var(--bd);background:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--th);transition:all .3s;}
.sci.active{border-color:var(--p);background:var(--p);color:white;}
.sci.done{border-color:var(--teal);background:var(--teal);color:white;}
.snm{font-size:10px;color:var(--th);white-space:nowrap;font-weight:500;}
.snm.active{color:var(--p);font-weight:600;}
.sln{flex:1;height:2px;background:var(--bd);margin:0 6px;margin-bottom:18px;max-width:60px;transition:background .3s;}
.sln.done{background:var(--teal);}
/* 可點擊步驟 */
#step-dot-1,#step-dot-2{transition:opacity .15s;}
#step-dot-1:hover .sci,#step-dot-2:hover .sci{box-shadow:0 0 0 3px var(--pl);}
#step-dot-1:hover .snm,#step-dot-2:hover .snm{color:var(--p);}

.card{background:white;border:1px solid var(--bd);border-radius:var(--r);padding:1.25rem;margin-bottom:.875rem;box-shadow:0 2px 14px rgba(124,111,247,.05);}
.clabel{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:12px;}
.cg{display:grid;gap:9px;}
.cg.c2{grid-template-columns:1fr 1fr;}
.cg.c5{grid-template-columns:repeat(5,1fr);}
.cb{padding:12px 8px;border:1.5px solid var(--bd);border-radius:var(--rs);background:white;cursor:pointer;text-align:center;transition:all .18s;color:var(--ts);font-family:var(--font);font-size:13px;font-weight:500;line-height:1.4;position:relative;overflow:hidden;}
.cb .ic{font-size:28px;display:block;margin-bottom:5px;}
.cb .lb{display:block;font-size:13px;font-weight:600;}
.cb .sb{display:block;font-size:10px;color:var(--th);margin-top:2px;}
.cb:hover{border-color:var(--p);background:var(--pl);}
.cb.sel{border:2px solid var(--p);background:var(--pl);color:var(--pd);}
.cb.sel::after{content:'✓';position:absolute;top:5px;right:7px;font-size:10px;color:var(--p);font-weight:700;}
.cb.sm{padding:9px 4px;font-size:11px;}

.age-row{display:flex;align-items:center;gap:10px;}
.age-row input{flex:1;padding:11px 12px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:16px;font-family:var(--font);color:var(--tx);background:white;outline:none;}
.age-row input:focus{border-color:var(--p);}
.age-row span{font-size:13px;color:var(--ts);white-space:nowrap;}

.photo-tip{font-size:12px;color:var(--ts);line-height:1.7;margin-bottom:12px;padding:10px 14px;background:#F0EEFF;border-radius:var(--rs);}
.photo-tip strong{color:var(--p);}
.slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.slot{aspect-ratio:1;border:1.5px dashed var(--bd);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#FAFAFF;overflow:hidden;position:relative;transition:all .2s;}
.slot:hover{border-color:var(--p);background:var(--pl);}
.slot.filled{border-style:solid;border-color:var(--p);padding:0;}
.slot.filled img{width:100%;height:100%;object-fit:cover;display:block;}
.slot-plus{font-size:26px;color:var(--th);}
.slot-del{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.55);color:white;border:none;border-radius:50%;width:22px;height:22px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.photo-count{font-size:11px;color:var(--th);text-align:right;margin-top:6px;}
#fileInput{display:none;}

.big-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--p),var(--pd));color:white;border:none;border-radius:var(--rs);font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(124,111,247,.3);font-family:var(--font);margin-top:.3rem;transition:all .2s;}
.big-btn:hover:not(:disabled){transform:translateY(-2px);}
.big-btn:disabled{background:#E2E2F0;color:var(--th);box-shadow:none;cursor:not-allowed;transform:none;}

.q-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.q-num{font-size:11px;color:var(--th);font-weight:500;}
.q-prog{height:5px;background:#EBEBF8;border-radius:3px;margin-bottom:1.1rem;overflow:hidden;}
.q-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--teal));border-radius:3px;transition:width .4s ease;}
.q-text{font-size:15px;font-weight:600;margin-bottom:14px;line-height:1.6;}
.opts{display:flex;flex-direction:column;gap:8px;}
.opt{padding:12px 14px;border:1.5px solid var(--bd);border-radius:var(--rs);background:white;text-align:left;cursor:pointer;font-size:13px;line-height:1.5;transition:all .15s;font-family:var(--font);display:flex;align-items:flex-start;gap:10px;color:var(--tx);}
.opt-ltr{min-width:22px;height:22px;border-radius:50%;background:#F0EEFF;color:var(--p);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.opt:hover{border-color:var(--p);background:var(--pl);}
.opt.sel{border:2px solid var(--p);background:var(--pl);color:var(--pd);}
.opt.sel .opt-ltr{background:var(--p);color:white;}
.q-nav{display:flex;gap:9px;margin-top:14px;}
.nav-btn{flex:1;padding:11px;border:1.5px solid var(--bd);border-radius:var(--rs);background:white;font-size:13px;color:var(--ts);cursor:pointer;transition:all .15s;font-family:var(--font);font-weight:500;}
.nav-btn:hover:not(:disabled){background:#F5F5FF;border-color:var(--p);color:var(--p);}
.nav-btn:disabled{opacity:.35;cursor:not-allowed;}
.nav-btn.primary{background:var(--p);color:white;border-color:var(--p);font-weight:600;}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.thumbs img{width:42px;height:42px;object-fit:cover;border-radius:8px;border:2px solid var(--bd);}

.result-hero{text-align:center;padding:1.5rem 1rem 1rem;}
.mbti-letters{display:flex;justify-content:center;gap:8px;margin-bottom:14px;}
.ml{width:60px;height:70px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:white;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.ml .ls{font-size:9px;font-weight:500;opacity:.85;margin-top:3px;}
.mbti-fullname{font-size:20px;font-weight:700;margin-bottom:4px;}
.mbti-sub{font-size:12px;color:var(--th);margin-bottom:.5rem;}
.desc-box{background:#F7F6FF;border-radius:var(--rs);padding:1rem 1.1rem;font-size:13px;color:var(--ts);line-height:1.9;margin-bottom:1.1rem;}
.dim-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:12px;}
.dim-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.dim-side{width:62px;font-size:11px;font-weight:600;flex-shrink:0;color:var(--ts);line-height:1.3;}
.dim-side.l{text-align:right;}
.dim-track{flex:1;height:16px;background:#EBEBF8;border-radius:8px;position:relative;overflow:hidden;}
.dim-fill{height:100%;border-radius:8px;position:absolute;top:0;left:0;transition:width 1.3s cubic-bezier(.34,1.3,.64,1);}
.dim-pct{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:white;}
.dim-badge-row{text-align:center;margin-bottom:12px;}
.dim-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:10px;font-weight:700;color:white;}
.type-section{border-radius:var(--r);padding:1.1rem;border:1px solid var(--bd);}
.type-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.type-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.type-name{font-size:15px;font-weight:700;}
.type-sub-lbl{font-size:11px;color:var(--ts);}
.type-desc{font-size:13px;color:var(--ts);line-height:1.75;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.tag{font-size:11px;padding:4px 10px;border-radius:999px;font-weight:600;}
.section-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:12px;}

.strip-label{font-size:11px;color:var(--th);text-align:center;margin-bottom:8px;font-weight:500;}
.pet-photos-strip{display:flex;gap:8px;margin-bottom:1rem;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;justify-content:center;flex-wrap:wrap;}
.pet-photos-strip::-webkit-scrollbar{display:none;}
.pet-photo-item{flex-shrink:0;width:90px;height:90px;border-radius:12px;overflow:hidden;border:3px solid white;box-shadow:0 3px 12px rgba(124,111,247,.2);}
.pet-photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.pet-photo-item:hover img{transform:scale(1.06);}

.famous-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.famous-card{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:white;transition:transform .2s,box-shadow .2s;}
.famous-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(124,111,247,.15);}
.famous-img-wrap{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.famous-img-wrap .fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:54px;background:inherit;}
.famous-info{padding:9px 10px 11px;}
.famous-name{font-size:12px;font-weight:700;color:var(--tx);line-height:1.3;}
.famous-work{font-size:10px;color:var(--p);margin-top:2px;font-weight:500;}

.amazon-intro{font-size:12px;color:var(--ts);margin-bottom:14px;padding:10px 14px;background:#FFF8F0;border-radius:var(--rs);line-height:1.6;border-left:3px solid #FF9900;}
.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.product-card{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:white;text-decoration:none;display:block;transition:all .2s;}
.product-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(255,153,0,.25);border-color:#FF9900;}
.product-img-wrap{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;}
.prod-emoji{font-size:44px;}
.product-badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;color:white;}
.amazon-tag{position:absolute;top:8px;right:8px;background:#FF9900;color:white;font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.5px;}
.product-body{padding:10px 12px 12px;}
.product-cat{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
.product-name{font-size:12px;font-weight:700;color:var(--tx);line-height:1.4;margin-bottom:4px;}
.product-reason{font-size:11px;color:var(--ts);line-height:1.5;margin-bottom:8px;}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.product-stars{font-size:11px;color:#FF9900;white-space:nowrap;}
.product-cta{font-size:11px;font-weight:700;color:white;background:#FF9900;border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:var(--font);white-space:nowrap;}
.affiliate-note{font-size:10px;color:var(--th);text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);}

/* ── 主打商品卡片 ── */
.hero-product-wrap{margin-bottom:.875rem;}
.hero-product-label{font-size:11px;font-weight:700;color:var(--coral);text-align:center;margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase;}
.hero-product-card{display:flex;gap:14px;background:white;border:2px solid var(--coral);border-radius:var(--r);padding:1.1rem;text-decoration:none;transition:all .2s;box-shadow:0 4px 20px rgba(242,112,89,.15);}
.hero-product-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(242,112,89,.28);}
.hero-product-emoji{font-size:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:12px;background:#FFF5F0;}
.hero-product-body{flex:1;min-width:0;}
.hero-product-mbti-tag{display:inline-block;background:var(--p);color:white;font-size:10px;font-weight:700;padding:2px 10px;border-radius:999px;margin-bottom:5px;letter-spacing:.05em;}
.hero-product-name{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:4px;line-height:1.4;}
.hero-product-why{font-size:12px;color:var(--ts);line-height:1.6;margin-bottom:8px;}
.hero-product-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.hero-product-stars{font-size:12px;color:#FF9900;font-weight:600;}
.hero-product-price{font-size:16px;font-weight:800;color:var(--coral);}
.hero-product-cta-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hero-product-timer{font-size:11px;color:var(--coral);font-weight:600;background:#FFF0EC;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.hero-product-cta{background:var(--coral);color:white;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;}
.hero-product-cta:hover{background:#D85A3A;}
@media(max-width:400px){.hero-product-card{flex-direction:column;align-items:center;text-align:center;}.hero-product-emoji{width:80px;height:80px;font-size:44px;}.hero-product-meta{justify-content:center;}.hero-product-cta-wrap{justify-content:center;}}

/* 下載按鈕 */
.download-card-btn{width:100%;padding:12px;background:white;border:1.5px solid var(--p);border-radius:var(--rs);font-size:13px;font-weight:600;color:var(--p);cursor:pointer;margin-bottom:.5rem;transition:all .2s;font-family:var(--font);}
.download-card-btn:hover{background:var(--pl);transform:translateY(-1px);}
/* 相關文章 */
.related-articles{background:white;border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem;margin-bottom:.875rem;box-shadow:0 2px 14px rgba(124,111,247,.05);}
.related-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--p);margin-bottom:10px;}
.related-grid{display:flex;flex-direction:column;gap:8px;}
.related-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bd);border-radius:var(--rs);cursor:pointer;transition:all .15s;text-decoration:none;}
.related-card:hover{border-color:var(--p);background:var(--pl);transform:translateX(3px);}
.related-card-icon{font-size:24px;flex-shrink:0;}
.related-card-body{flex:1;min-width:0;}
.related-card-title{font-size:12px;font-weight:600;color:var(--tx);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.related-card-meta{font-size:10px;color:var(--th);margin-top:2px;}
.related-card-arrow{font-size:14px;color:var(--p);flex-shrink:0;}
.reset-btn{width:100%;padding:13px;background:none;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:13px;color:var(--ts);cursor:pointer;margin-top:.5rem;font-family:var(--font);transition:all .15s;font-weight:500;}
.reset-btn:hover{border-color:var(--p);color:var(--p);background:var(--pl);}
/* 分享結果按鈕 */
.share-result-btn{width:100%;padding:13px;background:linear-gradient(135deg,#F27059,#E8659A);color:white;border:none;border-radius:var(--rs);font-size:14px;font-weight:700;cursor:pointer;margin:1rem 0 .75rem;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;font-family:var(--font);box-shadow:0 4px 14px rgba(242,112,89,.3);}
.share-result-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(242,112,89,.4);}
.share-result-btn:active{transform:scale(.97);}

.info-block{background:white;border:1px solid var(--bd);border-radius:var(--r);padding:1.4rem 1.25rem 1.25rem;margin-bottom:.875rem;box-shadow:0 2px 14px rgba(124,111,247,.05);}
.info-block-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--tx);margin-bottom:6px;}
.info-icon{font-size:18px;color:#F0A500;}
.info-block-sub{font-size:13px;color:var(--ts);margin-bottom:1.1rem;line-height:1.6;}
.info-items{display:flex;flex-direction:column;gap:.9rem;}
.info-item{padding-left:1rem;border-left:3px solid var(--pl);}
.info-item-title{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:2px;}
.info-item-desc{font-size:12px;color:var(--ts);line-height:1.65;}
.photo-tips-block{background:linear-gradient(135deg,#FFF8F5,#FFF0F8);}
.photo-tips-block .info-icon{color:#E8659A;}
.photo-tips-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;padding:0;}
.photo-tips-list li{font-size:13px;color:var(--ts);line-height:1.6;display:flex;align-items:flex-start;gap:8px;}
.photo-tips-list li::before{content:'•';color:#E8659A;font-size:16px;line-height:1.3;flex-shrink:0;}
@media(max-width:600px){.info-block{padding:1.1rem 1rem;}.info-block-title{font-size:15px;}.info-item-title{font-size:12px;}.info-item-desc{font-size:11px;}.photo-tips-list li{font-size:12px;}}

/* ══ 多頁面 ══ */
.wrap{padding-top:5rem!important;}
.page-hero{text-align:center;padding:1.5rem 0 1rem;margin-bottom:1.25rem;}
.page-hero-title{font-size:clamp(22px,4vw,30px);font-weight:700;margin-bottom:8px;color:var(--tx);letter-spacing:-.3px;}
.page-hero-sub{font-size:14px;color:var(--ts);max-width:500px;margin:0 auto;line-height:1.7;}
/* Blog */
.blog-grid{display:grid;grid-template-columns:1fr;gap:1rem;max-width:680px;margin:0 auto;}
.blog-card{background:white;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px rgba(124,111,247,.05);}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(124,111,247,.15);}
.blog-card.coming-soon{opacity:.65;cursor:default;}
.blog-card.coming-soon:hover{transform:none;box-shadow:none;}
.blog-card-img{height:140px;display:flex;align-items:center;justify-content:center;}
.blog-card-body{padding:1rem 1.1rem 1.1rem;}
.blog-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase;}
.blog-card-title{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:6px;line-height:1.45;}
.blog-card-desc{font-size:12px;color:var(--ts);line-height:1.7;margin-bottom:10px;}
.blog-card-meta{display:flex;gap:12px;font-size:11px;color:var(--th);}
/* FAQ */
.faq-list{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem;}
.faq-item{background:white;border:1px solid var(--bd);border-radius:var(--rs);overflow:hidden;}
.faq-item summary{padding:1rem 1.1rem;font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--tx);}
.faq-item summary::after{content:'+';font-size:18px;color:var(--p);transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 1.1rem 1rem;font-size:13px;color:var(--ts);line-height:1.75;border-top:1px solid var(--bd);padding-top:.75rem;}
/* About */
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:680px;margin:0 auto;}
.about-card{background:white;border:1px solid var(--bd);border-radius:var(--r);padding:1.25rem;text-align:center;}
.about-icon{font-size:36px;margin-bottom:10px;}
.about-card h3{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--tx);}
.about-card p{font-size:12px;color:var(--ts);line-height:1.7;}
@media(max-width:500px){.about-content{grid-template-columns:1fr;}}
@media(min-width:600px){.blog-grid{grid-template-columns:1fr 1fr;}}


/* ══ Blog Articles ══ */
.blog-grid{display:flex;flex-direction:column;gap:1.5rem;max-width:680px;margin:0 auto;}

/* blog page wrapper - outside main */
.blog-page-wrap{max-width:680px;margin:0 auto;padding:5rem 1rem 4rem;width:100%;}
@media(max-width:600px){.blog-page-wrap{padding:4rem .875rem 3rem;}}

/* 分類篩選列 */
.blog-filter-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem;}
.blog-filter-btn{padding:8px 18px;border-radius:999px;border:1.5px solid var(--bd);background:white;font-size:13px;font-weight:600;color:var(--ts);cursor:pointer;transition:all .18s;font-family:var(--font);}
.blog-filter-btn:hover{border-color:var(--p);color:var(--p);background:var(--pl);}
.blog-filter-btn.active{background:var(--p);color:white;border-color:var(--p);}
@media(max-width:400px){.blog-filter-btn{padding:7px 12px;font-size:12px;}}

/* ══ SHOP PAGE ══ */
.shop-page-wrap{max-width:680px;margin:0 auto;padding:5rem 1rem 4rem;width:100%;}
@media(max-width:600px){.shop-page-wrap{padding:4rem .875rem 3rem;}}
.nav-shop{background:var(--pl);color:var(--p)!important;border-color:var(--p)!important;font-weight:700;}
.nav-shop:hover{background:var(--p)!important;color:white!important;}
/* Shop hero */
.shop-hero{text-align:center;padding:1.5rem 1rem 1.25rem;margin-bottom:1.25rem;border-radius:var(--r);border:1px solid var(--bd);background:white;}
.shop-hero.personalized{background:linear-gradient(135deg,#F7F0FF,#EFF8FF);border-color:var(--bd);}
.shop-hero.no-result{background:linear-gradient(135deg,#FFF5F0,#FFF0F5);}
.shop-hero-tag{display:inline-block;background:var(--p);color:white;font-size:11px;font-weight:700;padding:4px 14px;border-radius:999px;margin-bottom:10px;letter-spacing:.05em;}
.shop-hero-title{font-size:clamp(18px,4vw,24px);font-weight:700;color:var(--tx);margin-bottom:8px;}
.shop-hero-sub{font-size:13px;color:var(--ts);line-height:1.7;max-width:480px;margin:0 auto 1rem;}
.shop-cta-emoji{font-size:48px;margin-bottom:12px;}
.shop-test-cta{background:linear-gradient(135deg,var(--p),var(--pd));color:white;border:none;border-radius:var(--rs);padding:14px 28px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);box-shadow:0 4px 16px rgba(124,111,247,.3);transition:all .2s;}
.shop-test-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,111,247,.4);}
.shop-test-note{font-size:11px;color:var(--th);margin-top:8px;}
/* Divider */
.shop-divider{text-align:center;position:relative;margin:1.5rem 0 1rem;}
.shop-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--bd);}
.shop-divider span{background:#F7F6FF;position:relative;padding:0 12px;font-size:12px;color:var(--th);font-weight:600;}
/* Section */
.shop-section{margin-bottom:1.75rem;}
.shop-section-title{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:4px;}
.shop-section-sub{font-size:12px;color:var(--ts);margin-bottom:.875rem;}
/* Grid */
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.shop-products-featured{margin-bottom:1rem;}
.shop-products-featured .shop-grid{grid-template-columns:1fr 1fr;}
/* Cards — reuse product-card style + enhancements */
.shop-card{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:white;text-decoration:none;display:block;transition:all .2s;position:relative;}
.shop-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(255,153,0,.2);border-color:#FF9900;}
.shop-card-badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;color:white;z-index:1;}
.shop-card-amazon{position:absolute;top:8px;right:8px;background:#FF9900;color:white;font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;z-index:1;}
.shop-card-img{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:42px;}
.shop-card-body{padding:9px 11px 11px;}
.shop-card-cat{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
.shop-card-name{font-size:12px;font-weight:700;color:var(--tx);line-height:1.4;margin-bottom:3px;}
.shop-card-reason{font-size:11px;color:var(--ts);line-height:1.5;margin-bottom:7px;}
.shop-card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap;}
.shop-card-stars{font-size:10px;color:#FF9900;}
.shop-card-cta{font-size:10px;font-weight:700;color:white;background:#FF9900;border:none;border-radius:5px;padding:4px 9px;cursor:pointer;font-family:var(--font);white-space:nowrap;}
.shop-affiliate-note{font-size:10px;color:var(--th);text-align:center;padding-top:1rem;border-top:1px solid var(--bd);line-height:1.6;}
@media(max-width:400px){.shop-grid{grid-template-columns:1fr;}}
.blog-article{background:white;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 14px rgba(124,111,247,.05);}
.article-hero{padding:1.75rem 1.5rem 1.25rem;}
.article-hero-inner{}
.article-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:10px;letter-spacing:.05em;}
.article-hero h2{font-size:clamp(18px,3.5vw,24px);font-weight:700;color:white;line-height:1.3;margin-bottom:6px;}
.article-meta{font-size:11px;color:rgba(255,255,255,.75);font-weight:500;}
.article-body{padding:1.25rem 1.4rem 1.5rem;}
.article-lead{font-size:15px;color:var(--tx);line-height:1.8;margin-bottom:1.1rem;font-weight:500;}
.article-body h3{font-size:15px;font-weight:700;color:var(--tx);margin:1.1rem 0 .6rem;}
.article-body p{font-size:13px;color:var(--ts);line-height:1.85;margin-bottom:.8rem;}
.article-body strong{color:var(--tx);}
.article-body em{color:var(--p);font-style:normal;font-weight:600;}
.article-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.55rem;margin-bottom:.8rem;}
.article-list li{font-size:13px;color:var(--ts);line-height:1.7;padding-left:1.2rem;position:relative;}
.article-list li::before{content:'→';position:absolute;left:0;color:var(--p);font-weight:700;}
.article-highlight{background:var(--pl);border-left:3px solid var(--p);border-radius:0 var(--rs) var(--rs) 0;padding:.875rem 1rem;margin:1rem 0;display:flex;gap:.75rem;align-items:flex-start;}
.article-highlight-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.article-highlight div{font-size:13px;color:var(--ts);line-height:1.7;}
.article-product-cta{background:#FFF8F0;border:1px solid rgba(255,153,0,.3);border-radius:var(--rs);padding:1rem 1.1rem;margin:1rem 0;display:flex;align-items:center;gap:12px;}
.article-product-emoji{font-size:32px;flex-shrink:0;}
.article-product-cta div{font-size:13px;color:var(--ts);line-height:1.6;}
.article-product-cta strong{color:var(--tx);display:block;margin-bottom:4px;}
.article-amz-btn{display:inline-block;margin-top:6px;background:#FF9900;color:white;padding:5px 12px;border-radius:6px;font-size:11px;font-weight:700;text-decoration:none;transition:background .15s;}
.article-amz-btn:hover{background:#E68900;}
.article-cta-text{font-size:13px;color:var(--ts);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bd);}
.article-inline-cta{background:none;border:none;color:var(--p);font-weight:700;cursor:pointer;font-size:13px;font-family:var(--font);text-decoration:underline;padding:0;}
.article-inline-cta:hover{color:var(--pd);}
@media(max-width:600px){.article-hero{padding:1.25rem 1rem 1rem;}.article-body{padding:1rem 1rem 1.25rem;}}
@media(max-width:600px){.wrap{padding:3.5rem .875rem 3rem;}.cg.c5{grid-template-columns:repeat(3,1fr);}.ml{width:50px;height:60px;font-size:22px;}.mbti-fullname{font-size:16px;}.dim-side{width:44px;font-size:10px;}.famous-name{font-size:11px;}.pet-photo-item{width:72px;height:72px;}}
@media(max-width:400px){.wrap{padding:3rem .75rem 3rem;}.cg.c5{grid-template-columns:1fr 1fr;}.famous-grid{grid-template-columns:repeat(2,1fr);}.products-grid{grid-template-columns:1fr;}.ml{width:44px;height:54px;font-size:19px;}.dim-side{width:36px;font-size:9px;}.pet-photo-item{width:62px;height:62px;}}
@media(min-width:720px){.wrap{padding:5rem 1.5rem 5rem;}.card{padding:1.5rem;}.ml{width:66px;height:76px;font-size:30px;}.mbti-fullname{font-size:21px;}.q-text{font-size:16px;}.opt{font-size:14px;padding:13px 15px;}.pet-photo-item{width:100px;height:100px;}}
@media(pointer:coarse){.cb{padding:14px 8px;}.opt{padding:14px 14px;}.nav-btn{padding:14px;}.big-btn{padding:17px;}.slot-del{width:26px;height:26px;}}
@media(max-width:700px) and (orientation:landscape){.wrap{padding-top:2.5rem;}.hero p{display:none;}}/* ══ 頂部導航 ══ */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:white;border-bottom:1px solid var(--bd);box-shadow:0 2px 12px rgba(0,0,0,.06);}
.nav-inner{max-width:900px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:52px;}
.nav-logo{font-size:15px;font-weight:700;color:var(--p);text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ts);text-decoration:none;transition:all .15s;white-space:nowrap;border:none;background:none;cursor:pointer;font-family:var(--font);}
.nav-link:hover{background:var(--pl);color:var(--p);}
.nav-link.active{background:var(--pl);color:var(--p);font-weight:600;}
.nav-cta{background:var(--p);color:white!important;border-radius:8px;padding:6px 14px;}
.nav-cta:hover{background:var(--pd)!important;}
.nav-right{display:flex;align-items:center;gap:8px;}
.hamburger{display:none;background:none;border:1.5px solid var(--bd);border-radius:8px;cursor:pointer;padding:7px 11px;color:var(--ts);font-size:20px;line-height:1;}
.mobile-menu{display:none;position:fixed;top:52px;left:0;right:0;background:white;border-bottom:1px solid var(--bd);padding:.75rem 1rem;flex-direction:column;gap:4px;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.1);}
.mobile-menu.open{display:flex;}
.mobile-menu .nav-link{width:100%;text-align:left;padding:10px 12px;}
@media(max-width:640px){.nav-links{display:none;}.hamburger{display:block;}.nav-logo span{display:none;}}

/* ══ 分享卡片 Modal ══ */
.share-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(6px);}
.share-modal{background:white;border-radius:24px;padding:1.25rem;max-width:360px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.3);}
.share-modal-title{font-size:14px;font-weight:700;text-align:center;margin-bottom:.875rem;color:var(--tx);}

/* 病毒卡片設計 */
.share-card-preview{width:100%;min-height:400px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.5rem 1.25rem 1.25rem;margin-bottom:1rem;position:relative;overflow:visible;cursor:pointer;}
.share-card-bg{position:absolute;inset:0;border-radius:20px;overflow:hidden;}
/* 裝飾圓圈背景 */
.share-card-bg::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);top:-80px;right:-80px;}
.share-card-bg::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-60px;left:-60px;}
.share-card-content{position:relative;z-index:1;text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;}

/* 頂部問句 hook */
.share-hook{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);background:rgba(0,0,0,.2);border-radius:999px;padding:5px 14px;margin-bottom:14px;letter-spacing:.02em;}

/* 照片 */
.share-pet-photo{width:160px;height:160px;border-radius:50%;object-fit:cover;border:5px solid rgba(255,255,255,.95);margin-bottom:14px;box-shadow:0 8px 32px rgba(0,0,0,.3);}
.share-pet-emoji{font-size:80px;margin-bottom:14px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));}

/* MBTI 大字 */
.share-mbti-big{font-size:clamp(52px,14vw,72px);font-weight:900;color:white;letter-spacing:-3px;text-shadow:0 4px 16px rgba(0,0,0,.25);line-height:1;margin-bottom:4px;}
.share-type-name{font-size:clamp(16px,4vw,20px);font-weight:700;color:white;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.2);}
.share-type-desc{font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;max-width:220px;margin-bottom:0;}

/* 底部網站標 */
.share-card-footer{position:relative;z-index:1;text-align:center;width:100%;}
.share-tagline{font-size:11px;color:rgba(255,255,255,.8);font-weight:600;margin-bottom:3px;}
.share-site{font-size:12px;color:white;font-weight:800;letter-spacing:.08em;background:rgba(0,0,0,.2);padding:4px 14px;border-radius:999px;display:inline-block;}

/* 分享按鈕 */
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:.75rem;}
.share-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:1.5px solid var(--bd);border-radius:10px;background:white;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;text-decoration:none;color:var(--tx);font-family:var(--font);}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);}
.share-btn.twitter{border-color:#1DA1F2;color:#1DA1F2;}
.share-btn.twitter:hover{background:#E8F5FE;}
.share-btn.facebook{border-color:#1877F2;color:#1877F2;}
.share-btn.facebook:hover{background:#E8EFFE;}
.share-btn.reddit{border-color:#FF4500;color:#FF4500;}
.share-btn.reddit:hover{background:#FFF0EB;}
.share-btn.instagram{border-color:#E1306C;color:#E1306C;}
.share-btn.instagram:hover{background:#FFF0F5;}
.share-btn.copy{border-color:var(--p);color:var(--p);}
.share-btn.copy:hover{background:var(--pl);}
.share-btn-icon{font-size:16px;}
.share-close{width:100%;padding:10px;border:none;background:#F5F5FF;border-radius:10px;color:var(--ts);font-size:13px;cursor:pointer;font-family:var(--font);font-weight:500;}
.share-close:hover{background:var(--pl);color:var(--p);}


/* ══ Brush! Game page ══ */
#pageBrush canvas{touch-action:none;}
/* ══ Share modal responsive ══ */
.share-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:flex-end;justify-content:center;padding:0;backdrop-filter:blur(6px);}
@media(min-width:480px){.share-modal-overlay{align-items:center;padding:1rem;}}
.share-modal{background:white;border-radius:24px 24px 0 0;padding:1.25rem 1.25rem 2rem;max-width:420px;width:100%;box-shadow:0 -8px 40px rgba(0,0,0,.2);max-height:92vh;overflow-y:auto;}
@media(min-width:480px){.share-modal{border-radius:24px;padding:1.25rem;max-height:none;}}