/* Tenshoku Smart Conversion Popup V4.5.3 — COMPACT + STAGE SPACING visual patch only.
   Tracking/trigger JS remains V4.5.1 unchanged. Admin untouched. */
:root{
  --tp451-bg:#08090b;
  --tp451-panel:#0d0f12;
  --tp451-panel2:#15171a;
  --tp451-text:#f7f6f2;
  --tp451-muted:#aaa8a5;
  --tp451-gold:#e2bd69;
  --tp451-red:#f3222c;
  --tp451-red2:#c90f19;
  --tp451-redline:rgba(243,34,44,.56);
}
.tp-sp-overlay{
  position:fixed;inset:0;z-index:2147482000;display:none;
  align-items:center;justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.73);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  overflow:auto;overscroll-behavior:contain;
}
.tp-sp-overlay.is-open{display:flex}
.tp-sp-card{
  position:relative;width:min(500px,90vw);max-height:min(76dvh,620px);overflow:auto;
  border:1px solid var(--tp451-redline);border-radius:24px;
  background:
    radial-gradient(circle at 50% 63%,rgba(128,0,5,.16),transparent 30%),
    linear-gradient(180deg,#121316 0%,#090a0c 61%,#08090a 100%);
  color:var(--tp451-text);
  box-shadow:0 28px 80px rgba(0,0,0,.72),0 0 30px rgba(236,24,34,.12),inset 0 0 0 1px rgba(255,255,255,.025);
  transform:translateY(10px) scale(.986);opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.tp-sp-card::-webkit-scrollbar{width:5px}.tp-sp-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
.tp-sp-overlay.is-visible .tp-sp-card{transform:translateY(0) scale(1);opacity:1}
.tp-sp-frame{position:absolute;inset:7px;pointer-events:none;border:1px solid rgba(226,189,105,.34);border-radius:18px}
.tp-sp-accent{height:2px;background:linear-gradient(90deg,transparent 10%,rgba(226,189,105,.12),var(--tp451-gold),rgba(243,34,44,.9),var(--tp451-gold),rgba(226,189,105,.12),transparent 90%)}
.tp-sp-inner{position:relative;padding:18px 22px 13px}
.tp-sp-close{
  position:absolute;right:14px;top:14px;z-index:4;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(243,34,44,.6);background:#0a0b0d;color:#fff;
  font-size:24px;font-weight:300;line-height:1;cursor:pointer;transition:transform .16s ease,background .16s ease;
}
.tp-sp-close:hover{transform:rotate(4deg);background:#15171a}.tp-sp-close:focus-visible{outline:2px solid var(--tp451-red);outline-offset:2px}
.tp-sp-brandrow{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 48px 2px}
.tp-sp-shopee{display:flex;flex-direction:column;align-items:center;gap:3px;color:#ff6a2d;font-size:8px;font-weight:800;line-height:1}
.tp-sp-shopee-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(160deg,#ff7135,#f04c1b);color:#fff;font-size:23px;font-weight:800;box-shadow:0 8px 18px rgba(240,76,27,.22)}
.tp-sp-x{color:#999;font-size:20px;font-weight:300}
.tp-sp-brand-logo{width:128px;max-width:34vw;height:auto;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.5))}
.tp-sp-kicker{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px auto 7px;color:var(--tp451-gold);font-size:8px;font-weight:850;letter-spacing:.20em;text-transform:uppercase;text-align:center}
.tp-sp-kicker:before,.tp-sp-kicker:after{content:"";width:58px;height:1px;background:linear-gradient(90deg,transparent,var(--tp451-gold))}.tp-sp-kicker:after{transform:scaleX(-1)}
.tp-sp-title{max-width:460px;margin:0 auto 5px;text-align:center;font-size:clamp(27px,3vw,34px);line-height:.96;letter-spacing:-.04em;font-weight:950;color:#fff;text-transform:uppercase}
.tp-sp-title .red{color:var(--tp451-red)}
.tp-sp-title .gold{color:var(--tp451-gold)}
.tp-sp-desc{max-width:440px;margin:0 auto;color:#bdbbb7;text-align:center;font-size:11.5px;line-height:1.38}
.tp-sp-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:160px;margin:14px auto 2px;isolation:isolate}
.tp-sp-stage:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(243,34,44,.86);box-shadow:0 0 18px rgba(243,34,44,.42),inset 0 0 20px rgba(243,34,44,.10);background:radial-gradient(circle,rgba(243,34,44,.10),rgba(92,0,5,.06) 48%,transparent 68%);z-index:-2}
.tp-sp-stage:after{content:"";position:absolute;bottom:10px;width:170px;height:42px;border-radius:50%;background:radial-gradient(ellipse,rgba(243,34,44,.30),rgba(111,0,5,.10) 46%,transparent 73%);filter:blur(9px);z-index:-1}
.tp-sp-product{position:relative;width:auto;height:132px;max-width:56%;object-fit:contain;filter:drop-shadow(0 14px 17px rgba(0,0,0,.50));transform:translateY(2px)}
.tp-sp-package-pill{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 8px;border:1px solid rgba(243,34,44,.42);border-radius:999px;background:rgba(9,10,12,.88);box-shadow:0 5px 15px rgba(0,0,0,.34);color:#f2eee9;font-size:8px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.tp-sp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px}
.tp-sp-trust-item{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:6px;min-height:52px;padding:7px 7px;border:1px solid rgba(243,34,44,.37);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012))}
.tp-sp-trust-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(243,34,44,.55);color:var(--tp451-red);font-size:12px}
.tp-sp-trust-copy{min-width:0}.tp-sp-trust-copy b{display:block;color:#fff;font-size:8px;line-height:1.05;letter-spacing:.012em}.tp-sp-trust-copy span{display:block;margin-top:2px;color:#969491;font-size:7px;line-height:1.1}
.tp-sp-primary{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(255,255,255,.10);border-radius:11px;min-height:46px;padding:10px 12px;background:linear-gradient(135deg,var(--tp451-red),#ee1823 53%,var(--tp451-red2));color:#fff;font-weight:950;font-size:12px;letter-spacing:.01em;cursor:pointer;box-shadow:0 10px 20px rgba(243,34,44,.18),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.tp-sp-primary:before{content:"S";display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:rgba(255,255,255,.14);font-size:15px;font-weight:900}
.tp-sp-primary:after{content:"→";margin-left:auto;font-size:23px;font-weight:400;line-height:1}.tp-sp-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 15px 28px rgba(243,34,44,.26)}.tp-sp-primary:active{transform:scale(.988)}.tp-sp-primary:focus,.tp-sp-primary:focus-visible{outline:none!important;box-shadow:0 12px 26px rgba(243,34,44,.24)!important}
.tp-sp-secondary{display:block;width:100%;margin-top:4px;border:0;background:transparent;color:#9a9895;font-size:9px;font-weight:800;letter-spacing:.035em;text-transform:uppercase;padding:8px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)}
.tp-sp-secondary:focus-visible{outline:1px solid rgba(226,189,105,.65);outline-offset:1px;border-radius:8px}
.tp-sp-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px 11px;color:#777570;font-size:7px;text-align:center}.tp-sp-foot b{color:#8f8b83;font-weight:600}
body.tp-smart-popup-open{overflow:hidden;touch-action:none}

@media(max-width:620px){
  .tp-sp-overlay{padding:12px;align-items:center}
  .tp-sp-card{width:min(350px,88vw);max-height:72dvh;border-radius:20px}
  .tp-sp-frame{inset:6px;border-radius:15px}
  .tp-sp-inner{padding:16px 13px 11px}
  .tp-sp-close{right:9px;top:9px;width:32px;height:32px;font-size:20px}
  .tp-sp-brandrow{gap:7px;padding:0 36px 1px}
  .tp-sp-shopee-mark{width:34px;height:34px;border-radius:9px;font-size:20px}
  .tp-sp-shopee{font-size:6.5px}.tp-sp-brand-logo{width:100px;max-width:36vw}.tp-sp-x{font-size:16px}
  .tp-sp-kicker{margin-top:3px;margin-bottom:6px;font-size:6.8px;letter-spacing:.16em;gap:5px}.tp-sp-kicker:before,.tp-sp-kicker:after{width:28px}
  .tp-sp-title{font-size:clamp(22px,6.6vw,27px);line-height:.96;margin-bottom:4px}
  .tp-sp-desc{font-size:9.6px;line-height:1.34;max-width:94%}
  .tp-sp-stage{min-height:130px;margin:12px auto 1px}
  .tp-sp-stage:before{width:120px;height:120px}.tp-sp-stage:after{width:138px;height:34px;bottom:8px}
  .tp-sp-product{height:104px;max-width:52%}
  .tp-sp-package-pill{bottom:0;font-size:6.8px;padding:3px 7px}
  .tp-sp-trust{gap:4px;margin:4px 0 7px}
  .tp-sp-trust-item{grid-template-columns:21px minmax(0,1fr);gap:4px;min-height:43px;padding:5px 4px;border-radius:9px}
  .tp-sp-trust-icon{width:21px;height:21px;font-size:10px}.tp-sp-trust-copy b{font-size:6.2px}.tp-sp-trust-copy span{font-size:5.5px;margin-top:1px}
  .tp-sp-primary{min-height:42px;border-radius:10px;font-size:10.5px;padding:8px 9px}.tp-sp-primary:before{width:23px;height:23px;font-size:12px}.tp-sp-primary:after{font-size:19px}
  .tp-sp-secondary{font-size:7.2px;margin-top:2px;padding:6px}
  .tp-sp-foot{padding:0 10px 9px;font-size:6.3px}
}
@media(max-width:380px){
  .tp-sp-card{width:89vw}.tp-sp-inner{padding:14px 11px 10px}.tp-sp-brand-logo{width:94px}.tp-sp-shopee-mark{width:32px;height:32px}
  .tp-sp-title{font-size:21px}.tp-sp-desc{font-size:9px}.tp-sp-stage{min-height:122px;margin-top:11px}.tp-sp-stage:before{width:112px;height:112px}.tp-sp-product{height:98px}
  .tp-sp-trust-item{grid-template-columns:1fr;text-align:center;justify-items:center;min-height:43px}.tp-sp-trust-copy span{display:none}.tp-sp-primary{font-size:10px}
}
@media(max-height:700px) and (max-width:620px){
  .tp-sp-card{max-height:78dvh}.tp-sp-inner{padding-top:12px}.tp-sp-brandrow{padding-top:0}.tp-sp-kicker{margin-bottom:4px}.tp-sp-title{font-size:20px}.tp-sp-desc{font-size:8.6px}.tp-sp-stage{min-height:105px;margin-top:9px}.tp-sp-stage:before{width:96px;height:96px}.tp-sp-product{height:84px}.tp-sp-trust-item{min-height:39px}.tp-sp-foot{padding-bottom:7px}
}
@media(prefers-reduced-motion:reduce){.tp-sp-card,.tp-sp-primary,.tp-sp-close{transition:none!important}}