/* 🎬 ฉากเล่าเรื่องคู่ Trade Manager + Indicator (pair-story.js · user 2026-10-03)
   โหลดเฉพาะตอนจะเล่น (ไม่ inline ใน style.html ⇒ หน้าแรกไม่หนักขึ้น) · 🔴 ทุกกฎขึ้นต้นด้วย .pst ⛔ ห้ามมีชื่อคลาสลอย ๆ (.tag/.msg/.phone ชนของเว็บได้)
   ภาษาภาพ = ฉาก Combine / การ์ดกลายร่าง (.cmb-* / .tmm-* ใน style.html) */
.pst{--bg:#f4f4f6;--text:#18181b;--muted:#71717a;--accent:#6c63ff;--line:#e4e4e7;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Leelawadee UI",Arial,sans-serif}
.pst *{box-sizing:border-box}
.pst-frame{position:relative;width:100%;border-radius:26px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#fbfbfd,#e9e9ef 80%);border:1px solid var(--line);box-shadow:0 30px 70px -44px rgba(40,40,80,.55)}
.pst-stage{position:absolute;left:0;top:0;transform-origin:0 0;font-size:12px;overflow:hidden}
.pst-ctl{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pst-ctl button{font:700 14px/1 inherit;font-family:inherit;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer}
.pst-ctl button:first-child{background:var(--text);color:#fff;border-color:var(--text)}
.pst-ctl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pst-dots{display:flex;gap:6px}
/* แถบฉาก = กดได้ (เล่นจากฉากนั้น) : พื้นที่กดสูง 21px แต่เส้นที่เห็น 5px (background-clip) ⛔ ใช้ background-color เท่านั้น — shorthand จะรีเซ็ต clip */
.pst-dots i{width:22px;height:5px;padding:8px 0;box-sizing:content-box;border-radius:3px;background-color:#d4d4d8;background-clip:content-box;cursor:pointer;transition:background-color .3s}
.pst-dots i.on{background-color:var(--accent)}
.pst-dots i:hover{background-color:#a1a1aa}.pst-dots i.on:hover{background-color:#857dff}
.pst-dots i:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pst-note{margin:10px 0 0;font-size:12px;color:var(--muted)}

/* ── หน้าต่างลอย (แบบฉาก Combine : พื้นมืดลง · กด Esc / คลิกนอกเวที / ✕ = ปิด) */
.pst-modal{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,20,34,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;overflow-y:auto}
.pst-modal.on{opacity:1;visibility:visible;transition:opacity .3s}
.pst-box{position:relative;width:min(1000px,100%);margin:auto;padding:16px 16px 14px;border-radius:30px;background:var(--bg);box-shadow:0 40px 90px -30px rgba(10,10,30,.6);transform:translateY(14px) scale(.98);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.pst-modal.on .pst-box{transform:none}
.pst-x{position:absolute;top:-12px;right:-12px;width:42px;height:42px;border-radius:50%;border:1px solid #d9d9df;background:linear-gradient(180deg,#fff,#ececf0);color:#1c1c22;font-size:17px;cursor:pointer;box-shadow:0 10px 22px -10px rgba(0,0,0,.4);z-index:2}
.pst-x:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.pst-modal{padding:10px;align-items:flex-start}.pst-box{padding:10px 10px 12px;border-radius:22px;margin-top:12px}.pst-x{top:6px;right:6px}}

/* ── ชิ้นภาพ 3D (.cmb-p / .tmm-p) : img.n ตัวชิ้น · img.r/.l สัน (ความทึบตามองศาหัน --kr/--kl) */
.pst .ts-p{position:absolute;display:block;pointer-events:none;user-select:none;opacity:0;filter:blur(10px);transform:scale(.92);
  transition:opacity .6s ease,filter .6s ease,transform .8s cubic-bezier(.3,1.25,.5,1),left .9s cubic-bezier(.5,0,.25,1),top .9s cubic-bezier(.5,0,.25,1)}
.pst .ts-p.in{opacity:1;filter:drop-shadow(0 16px 22px rgba(20,20,40,.32));transform:none}
.pst .ts-p img{display:block;height:auto;max-width:none;pointer-events:none}
.pst .ts-p img.n{position:relative;z-index:1;width:100%}
.pst .ts-p img.r,.pst .ts-p img.l{position:absolute;top:0;width:calc(100% + var(--t,3px))}
.pst .ts-p img.r{left:0;opacity:var(--kr,.75);transition:opacity var(--td,.8s) cubic-bezier(.45,0,.3,1)}
.pst .ts-p img.l{left:calc(-1 * var(--t,3px));opacity:var(--kl,0);transition:opacity var(--td,.8s) cubic-bezier(.45,0,.3,1)}
.pst .ts-p::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.08) 46%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.08) 54%,rgba(255,255,255,0) 58%) no-repeat;
  background-size:300% 100%;background-position:120% 0;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
.pst .ts-live::after{animation:pst-glare 4.2s cubic-bezier(.45,0,.25,1) .4s infinite}
@keyframes pst-glare{0%{background-position:120% 0}27%,100%{background-position:-20% 0}}
.pst .ts-cloud{animation:pst-bob 2.6s ease-in-out infinite,pst-breathe 3.1s ease-in-out infinite,pst-wiggle 2.7s ease-in-out .6s infinite}
@keyframes pst-bob{50%{translate:0 -12px}}
@keyframes pst-breathe{0%,100%{scale:1}50%{scale:1.04}}
@keyframes pst-wiggle{0%,26%,100%{rotate:0deg}4%{rotate:-1.6deg}8%{rotate:1.4deg}12%{rotate:-1.1deg}16%{rotate:.8deg}20%{rotate:-.4deg}23%{rotate:.2deg}}

/* ── เวทีเอียง + เงาพื้น (cmb-tilt / cmb-ground) */
.pst .ts-tilt{position:absolute;inset:0;transform:perspective(1400px) rotateY(-10deg) rotateX(4deg);transition:transform var(--td,1.1s) cubic-bezier(.45,0,.3,1)}
.pst .ts-flat .ts-tilt{transform:none}
.pst .ts-ground{position:absolute;height:36px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(30,28,70,.42),rgba(30,28,70,.14) 60%,transparent);opacity:0;scale:.3;translate:var(--gx,-22px) 0;
  transition:opacity .6s ease,scale .9s cubic-bezier(.3,1.2,.5,1),translate var(--td,.8s) cubic-bezier(.45,0,.3,1),width .6s}
.pst .ts-ground.in{opacity:1;scale:1}
.pst .ts-gbar{height:22px}
.pst .ts-gbar.in.ts-bobsh{animation:pst-bob-sh 2.6s ease-in-out infinite}
@keyframes pst-bob-sh{50%{scale:.78;opacity:.55}}
.pst .ts-rig{position:absolute;transform-origin:0 0;transition:transform 1.1s cubic-bezier(.5,0,.25,1)}

/* ── หมอก · สั่น · เชื่อม · เรือง */
.pst .ts-mist{position:absolute;width:0;height:0;pointer-events:none;z-index:8;scale:var(--z,1)}
.pst .ts-mist i{position:absolute;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(214,210,255,.6) 45%,rgba(214,210,255,0) 70%);filter:blur(10px);animation:pst-puff 1.25s cubic-bezier(.2,.7,.3,1) both}
.pst .ts-mist i:nth-child(2){left:-90px;top:-80px;animation-delay:.08s}.pst .ts-mist i:nth-child(3){left:90px;top:-100px;animation-delay:.16s}
.pst .ts-mist i:nth-child(4){left:-80px;top:90px;animation-delay:.08s}.pst .ts-mist i:nth-child(5){left:100px;top:90px}.pst .ts-mist i:nth-child(6){top:-140px;animation-delay:.16s}.pst .ts-mist i:nth-child(7){top:140px}
@keyframes pst-puff{0%{opacity:0;transform:scale(.25)}35%{opacity:.95}100%{opacity:0;transform:scale(1.7)}}
.pst .ts-snap{animation:pst-snap .45s ease-out}
@keyframes pst-snap{25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,0)}}
.pst .ts-weld{position:absolute;width:0;pointer-events:none;z-index:9}
.pst .ts-weld b{position:absolute;left:-3px;top:0;width:6px;height:100%;border-radius:3px;transform-origin:50% 0;transform:scaleY(0);
  background:linear-gradient(180deg,#fff,#c9f6ff 45%,#8be9ff);box-shadow:0 0 8px 2px rgba(140,230,255,.95),0 0 22px 6px rgba(108,99,255,.55);
  animation:pst-weld-run .45s cubic-bezier(.4,0,.6,1) forwards,pst-weld-fade .7s ease .45s forwards}
@keyframes pst-weld-run{to{transform:scaleY(1)}}
@keyframes pst-weld-fade{0%{opacity:1;filter:brightness(1.7)}100%{opacity:0;filter:none}}
.pst .ts-weld i{position:absolute;left:-2px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #ffc857;opacity:0;animation:pst-spark .55s ease-out forwards}
@keyframes pst-spark{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}}
.pst .ts-glow{animation:pst-glow .9s ease-out}
@keyframes pst-glow{35%{filter:drop-shadow(0 0 26px rgba(108,99,255,.75)) brightness(1.08)}}

/* ── ป้ายฉาก (tmm-cap) + ตัวนับ */
.pst .ts-cap{position:absolute;left:50%;top:18px;transform:translate(-50%,8px);display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:12px;white-space:nowrap;z-index:20;
  background:linear-gradient(180deg,#fff 0%,#f6f6f8 55%,#e9e9ee 100%);border:1px solid #d9d9df;color:#1c1c22;font-size:16px;font-weight:650;opacity:0;transition:opacity .35s,transform .35s;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 26px -12px rgba(28,28,34,.4)}
.pst .ts-cap::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--dot,#14b8a6);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot,#14b8a6) 20%,transparent)}
.pst .ts-cap.show{opacity:1;transform:translate(-50%,0)}
.pst .ts-count{position:absolute;right:18px;top:18px;padding:5px 12px;border-radius:12px;background:linear-gradient(120deg,#6c63ff,#14b8a6);color:#fff;font-size:15px;font-weight:800;z-index:20;box-shadow:0 12px 24px -10px rgba(108,99,255,.8)}

/* ── การ์ด Setup Trade Engine (หน้าตาตามของจริง · AutoTradePopup.mqh) */
.pst .ts-setup{position:absolute;width:330px;border-radius:14px;padding:12px;background:#1d2230;border:1px solid #3a4152;color:#d8dce6;
  box-shadow:0 26px 50px -20px rgba(10,12,30,.6);font-family:"Segoe UI",Arial,sans-serif;opacity:0;filter:blur(10px);transform:scale(.92);
  transition:opacity .5s,filter .5s,transform .7s cubic-bezier(.3,1.25,.5,1);z-index:6}
.pst .ts-setup.in{opacity:1;filter:none;transform:none}
.pst .su-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.pst .su-hd b{font-size:14px;color:#eef1f7}.pst .su-hd span{font-size:11px;font-weight:700;color:#2fb3a2}.pst .su-hd span:before{content:"● "}
.pst .su-box{background:#232937;border:1px solid #333b4d;border-radius:9px;padding:8px 10px;margin-bottom:8px}
.pst .su-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:#a3abbd;min-height:24px}
.pst .su-row b{color:#eef1f7;font-weight:600}
.pst .su-seg{display:inline-flex;gap:3px}.pst .su-seg i{font-style:normal;font-size:10.5px;padding:3px 7px;border-radius:4px;background:#2e3646;color:#c9cfdb}
.pst .su-seg i.on{background:#2b7fc4;color:#fff}
.pst .su-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pst .su-tabs i{font-style:normal;text-align:center;font-size:11px;font-weight:600;padding:6px 0;border-radius:5px;background:#2e3646;color:#c9cfdb;transition:background .3s,color .3s}
.pst .su-tabs i.on{background:#2fb3a2;color:#0f2420}
.pst .su-pane{min-height:150px}
.pst .su-pane h6{margin:0 0 4px;font-size:10.5px;letter-spacing:.06em;color:#8b93a7;font-weight:700}
.pst .su-v{display:inline-block;min-width:40px;text-align:center;padding:2px 6px;border-radius:4px;border:1px solid #4a5366;background:#151a24;color:#eef1f7;font-size:11px}
.pst .su-on,.pst .su-off{display:inline-block;min-width:40px;text-align:center;padding:3px 6px;border-radius:4px;background:#2b7fc4;color:#fff;font-size:10.5px;font-weight:700}
.pst .su-off{background:#2e3646;color:#c9cfdb}
.pst .su-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pst .su-btns i{font-style:normal;text-align:center;font-size:12px;padding:7px 0;border-radius:6px;background:#2e3646;color:#c9cfdb;transition:transform .15s,background .2s}
.pst .su-btns i.done{background:#2fb3a2;color:#0f2420;font-weight:600}
.pst .su-btns i.press{transform:scale(.95);background:#25998a}
.pst .ts-eng{position:absolute;padding:6px 12px;border-radius:999px;background:linear-gradient(120deg,#14b8a6,#16a34a);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;z-index:7;
  box-shadow:0 10px 22px -10px rgba(20,184,166,.9);opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.pst .ts-eng.in{opacity:1;transform:none}

/* ── กราฟ MT5 ธีมสว่าง + กล่องโซน (หน้าตาตาม draft zone.png) */
.pst .ts-chart{position:absolute;border-radius:16px;background:#fafafa;border:1px solid #e3e4ea;box-shadow:0 20px 44px -30px rgba(30,30,60,.5);overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .7s cubic-bezier(.3,1.2,.4,1)}
.pst .ts-chart.in{opacity:1;transform:none}
.pst .ts-chart svg{position:absolute;left:0;top:0}
.pst .zb{position:absolute;pointer-events:none;font-family:"Segoe UI",Arial,sans-serif;transition:opacity .4s}
.pst .zb .hd{position:absolute;left:0;right:0;height:18px;padding:0 6px;font-size:10.5px;line-height:18px;color:#fff;background:#bdbdbd;transition:background .5s,color .5s}
.pst .zb.mkt .hd{background:#d4a72c;color:#2a1f00}
.pst .zb .tpa{position:absolute;left:0;right:0;background:rgba(77,163,138,.38)}
.pst .zb .sla{position:absolute;left:0;right:0;background:rgba(206,122,120,.42);transition:top .5s,height .5s,background .5s}
.pst .zb .sla.lock{background:rgba(168,85,247,.28)}
.pst .zb .lb{position:absolute;left:0;right:0;height:16px;padding:0 6px;font-size:9.5px;line-height:16px;text-align:right;color:#3f3f46;white-space:nowrap;overflow:hidden;transition:top .5s}
.pst .zb .lb.tp{background:rgba(120,170,190,.35)}.pst .zb .lb.en{background:rgba(120,170,190,.45)}.pst .zb .lb.sl{background:rgba(200,130,130,.35)}
.pst .zb .lb.sl.lock{background:rgba(168,85,247,.3)}
/* 📏 เส้น R ในกล่อง (ทุก step ของ trailing) : ป้ายซ้ายเหนือเส้น ⇒ ไม่ชนแถบ SL ที่อยู่ใต้เส้น · แตะแล้ว = ม่วง (สีเดียวกับ BE/Trailing) + กะพริบครั้งเดียว */
.pst .zb .rl{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(63,63,70,.4);z-index:1;transition:border-color .3s}
.pst .zb .rl b{position:absolute;left:5px;top:-14px;font-size:9.5px;font-weight:700;color:#52525b;transition:color .3s}
.pst .zb .rl.hit{border-top:1.5px solid #8b5cf6;animation:pst-rhit .7s ease-out}
.pst .zb .rl.hit b{color:#7c3aed}
@keyframes pst-rhit{0%{box-shadow:0 0 0 0 rgba(139,92,246,.9)}50%{box-shadow:0 0 10px 2px rgba(139,92,246,.7)}100%{box-shadow:none}}
.pst .zb .wm{position:absolute;left:0;right:0;text-align:center;font-weight:800;font-size:24px;color:rgba(255,255,255,.55)}
.pst .tag{position:absolute;font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;white-space:nowrap;pointer-events:none;transition:opacity .4s;z-index:3}
.pst .tag.hide{opacity:0}
.pst .t-k{color:#0f766e;background:rgba(20,184,166,.16)}
.pst .t-pnl{color:#fff;background:#16a34a;font-size:11.5px}.pst .t-pnl.neg{background:#dc2626}
.pst .t-be{color:#6b21a8;background:rgba(168,85,247,.18)}
.pst .win{position:absolute;padding:12px 18px;border-radius:16px;background:linear-gradient(135deg,#16a34a,#14b8a6);color:#fff;text-align:center;box-shadow:0 20px 50px -18px rgba(22,163,74,.8);transition:opacity .5s,transform .5s cubic-bezier(.3,1.6,.5,1);z-index:5}
.pst .win.hide{opacity:0;transform:scale(.6)}
.pst .win b{display:block;font-size:28px;letter-spacing:-.02em}.pst .win span{font-size:12px;font-weight:700;opacity:.92}

/* ── โทรศัพท์ + Telegram */
.pst .phone{position:absolute;border-radius:30px;background:#0b0b0d;padding:9px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1.5px #2a2a30;transition:transform .8s cubic-bezier(.3,1.2,.4,1),opacity .6s;z-index:10}
.pst .phone.away{transform:translateY(115%);opacity:0}
.pst .scr{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#cfdde9}
.pst .lock{position:absolute;inset:0;background:linear-gradient(160deg,#283a5c,#1b2338 60%,#3b2d5a);transition:opacity .5s}
.pst .lock .clk{position:absolute;top:44px;left:0;right:0;text-align:center;color:#fff;font-size:44px;font-weight:300}
.pst .lock .dt{position:absolute;top:30px;left:0;right:0;text-align:center;color:#dbe3f5;font-size:11px;font-weight:600}
.pst .ntf{position:absolute;left:8px;right:8px;top:118px;background:rgba(245,246,250,.94);border-radius:16px;padding:9px 11px;color:#111;transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .4s}
.pst .ntf.hide{transform:translateY(-30px) scale(.95);opacity:0}
.pst .ntf .app{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#666;font-weight:600}
.pst .ntf .app i{width:16px;height:16px;border-radius:4px;background:#2aa3e0;display:grid;place-items:center;color:#fff;font-style:normal;font-size:9px}
.pst .ntf .app em{margin-left:auto;font-style:normal}
.pst .ntf b{display:block;font-size:11.5px;margin-top:4px}.pst .ntf p{margin:2px 0 0;font-size:10.5px;color:#333}
.pst .tg{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .4s}.pst .tg.hide{opacity:0}
.pst .tg-hd{height:46px;flex:none;display:flex;align-items:center;gap:8px;padding:12px 10px 0;background:#517da2;color:#fff}
.pst .tg-hd i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6c63ff,#14b8a6);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}
.pst .tg-hd b{font-size:12px}.pst .tg-hd small{display:block;font-size:9px;opacity:.8;font-weight:500}
.pst .tg-body{position:relative;flex:1;overflow:hidden;background:#cfdde9}
.pst .tg-feed{position:absolute;left:0;right:0;bottom:0;padding:8px 8px 10px}
.pst .msg{background:#fff;border-radius:12px 12px 12px 4px;padding:7px 9px;color:#111;font-size:9.6px;line-height:1.38;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.08);margin-top:8px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.pst .msg.in{opacity:1;transform:none}.pst .msg .ft{display:block;margin-top:5px;color:#8a96a3;font-size:8.6px}
.pst .kb{display:flex;flex-direction:column;gap:4px;margin-top:4px;opacity:0;transition:opacity .4s}.pst .kb.in{opacity:1}
.pst .kb span{display:block;text-align:center;padding:7px 4px;border-radius:9px;background:rgba(73,104,135,.42);color:#fff;font-size:9.4px;font-weight:700;transition:background .2s,transform .15s}
.pst .kb span.press{background:rgba(42,74,108,.85);transform:scale(.97)}.pst .kb.used span{opacity:.45}
.pst .tap{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(120,120,150,.35);box-shadow:0 0 0 2px rgba(255,255,255,.95),0 4px 14px rgba(0,0,0,.25);pointer-events:none;opacity:0;transition:left .55s ease,top .55s ease,opacity .25s;z-index:30}
.pst .tap.show{opacity:1}.pst .tap.hit{animation:pst-tap .45s ease}
@keyframes pst-tap{50%{transform:scale(.7);background:rgba(255,255,255,.85)}}
/* จอแคบ (ผังแนวตั้ง) : stage ถูกย่อ ⇒ ขยายตัวอักษร */
.pst .port .msg{font-size:13.4px}.pst .port .msg .ft{font-size:11px}.pst .port .kb span{font-size:13px;padding:10px 4px}
.pst .port .tg-hd{height:58px}.pst .port .tg-hd b{font-size:16px}.pst .port .ntf{top:150px}.pst .port .ntf b{font-size:16px}.pst .port .ntf p{font-size:14.5px}
.pst .port .lock .clk{font-size:60px;top:56px}.pst .port .lock .dt{font-size:14px;top:38px}
.pst .port .ts-cap{font-size:21px;white-space:normal;width:500px;justify-content:center;text-align:center}
.pst .port .ts-count{font-size:18px}
/* ══ 📓 เรื่อง jr : Trade Manager + Journal (pair-story.js storyJr) ══════════════════════════════
   หน้าตาตามของจริง : การ์ด Trade Setup (journal/JrCard.mqh · ภาพ "Trade Setup Check list.png" เป็นแนว) · หน้า Trade Detail / Calendar (ภาพ "Journal Trades Trade Detail.jpg")
   ขนาดเป็น em ⇒ ผังแนวตั้ง (.port) ขยายตัวอักษรที่เดียว */
.pst .ts-hot{position:absolute;pointer-events:none}
.pst .t-mv{color:#9a3412;background:rgba(245,158,11,.2)}
.pst .zb.shut{opacity:.45!important}
.pst .tap.grab{transition:opacity .25s;background:rgba(245,158,11,.4)}
/* การ์ด Trade Setup */
.pst .jc{position:absolute;z-index:6;font-size:11px;padding:.8em .9em .9em;border-radius:1.2em;background:#161a21;border:1px solid #2c323d;color:#c9cfdb;font-family:"Segoe UI",Arial,sans-serif;
  box-shadow:0 26px 50px -20px rgba(10,12,30,.65);opacity:0;filter:blur(10px);transform:scale(.92);transition:opacity .5s,filter .5s,transform .7s cubic-bezier(.3,1.25,.5,1)}
.pst .jc.in{opacity:1;filter:none;transform:none}
.pst .jc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7em}
.pst .jc-hd b{font-size:1.3em;color:#eef1f7}
.pst .jc-x{font-style:normal;width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:.35em;background:#d23c32;color:#fff;font-size:.95em}
.pst .jc-box{background:#1d222b;border:1px solid #2a303b;border-radius:.8em;padding:.6em .75em;margin-bottom:.65em}
.pst .jc-bh{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;margin-bottom:.45em}
.pst .jc-bh span{font-size:1.1em;color:#8b93a7}
.pst .jc-bh em{font-style:normal;font-size:.88em;color:#7c8496;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pst .jc-st.dirty{color:#2fb3a2}.pst .jc-sel{color:#f0912d!important}.pst .jc-uns{color:#2fb3a2!important}
.pst .jc-rows{min-height:3.1em}
.pst .jc-r{display:flex;align-items:center;gap:.6em;padding:.35em .1em;border-radius:.5em;transition:opacity .4s,transform .4s,background .3s}
.pst .jc-r.gone{opacity:0;transform:translateX(-14px)}
.pst .jc-r.pop{animation:pst-row .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes pst-row{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
.pst .jc-r.sel{background:rgba(240,145,45,.08)}
.pst .jc-r .ck,.pst .jc-auto .ck{flex:none;width:1.35em;height:1.35em;border-radius:.3em;border:1.5px solid #4a5366;transition:background .2s,border-color .2s}
.pst .jc-r.dr .ck{opacity:.35}
.pst .jc-r.sel .ck,.pst .jc-auto .ck.on{display:grid;place-items:center;font-size:.9em;font-weight:900}
.pst .jc-r.sel .ck{background:#f0912d;border-color:#f0912d;color:#fff}.pst .jc-r.sel .ck::after{content:"✓"}
.pst .jc-r s{flex:none;width:.22em;height:2.4em;border-radius:2px;background:#3b82f6}
.pst .jc-rt{flex:1;min-width:0}
.pst .jc-rt p{margin:0;display:flex;align-items:baseline;gap:.75em;white-space:nowrap;font-size:.98em;color:#7c8496}
.pst .jc-rt p b{color:#eef1f7;font-size:1.08em}.pst .jc-rt .buy{color:#4f9cf9;font-weight:700}.pst .jc-rt .px{color:#d8dce6;font-size:1.08em}
.pst .jc-rt .nw{font-style:normal;font-size:.8em;font-weight:800;color:#0f2420;background:#2fb3a2;border-radius:99px;padding:0 .5em}
.pst .jc-r .ic{display:flex;gap:.3em;flex:none}
.pst .jc-r .ic i{width:2.2em;height:2.2em;border-radius:.45em;background:#2a303b;color:#d8dce6;display:grid;place-items:center}
.pst .jc-r .ic.dim i{opacity:.35}.pst .jc-r .ic svg{width:1.4em;height:1.4em}
.pst .jc-set{display:flex;align-items:center;gap:.55em;height:1.95em;font-size:1.02em;color:#a3abbd}
.pst .jc-set i{font-style:normal;width:1em;color:#5c6578}.pst .jc-set s{width:.95em;height:.95em;border-radius:50%;border:1.5px solid #4a5366}
.pst .jc-set u{margin-left:auto;text-decoration:none;color:#5c6578;transition:transform .3s}
.pst .jc-bo.on{color:#eef1f7;font-weight:700}.pst .jc-bo.on i{color:#f0912d}
.pst .jc-bo.on s{visibility:hidden}.pst .jc-bo.on u{transform:rotate(90deg)}
.pst .jc-items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1)}
.pst .jc-items.open{grid-template-rows:1fr}
.pst .jc-in{min-height:0;overflow:hidden}
.pst .jc-ph,.pst .jc-it{display:grid;grid-template-columns:1.4em 1.4em 1.4em 1fr;gap:.55em;align-items:center;padding-left:1.6em}
.pst .jc-ph{font-size:.8em;color:#5c6578;padding-top:.2em}
.pst .jc-ph span{text-align:center;width:2em;margin-left:-.25em}
.pst .jc-it{height:1.95em}
.pst .jc-it b{width:1.4em;height:1.4em;border-radius:.28em;border:1.5px solid #3a4152;display:grid;place-items:center;font-size:.85em;color:#4a5366;transition:background .2s,border-color .2s,color .2s}
.pst .jc-it b.p::after{content:"✓"}.pst .jc-it b.f::after{content:"✕"}.pst .jc-it b.s::after{content:"⊘"}
.pst .jc-it b.p.on{background:rgba(47,179,162,.22);border-color:#2fb3a2;color:#5eead4}
.pst .jc-it b.f.on{background:rgba(220,60,60,.25);border-color:#e05252;color:#ff8a8a}
.pst .jc-it b.s.on{border-color:#a3abbd;color:#e5e7eb}
.pst .jc-it span{font-size:1.05em;color:#a3abbd}.pst .jc-it.req span{color:#eef1f7;font-weight:700}
.pst .jc-sum{text-align:right;font-weight:700;font-size:1.05em;color:#7c8496;padding-top:.3em;transition:color .3s}
.pst .jc-sum.no{color:#ef5350}.pst .jc-sum.ok{color:#2fb3a2}
.pst .jc-txt{min-height:1.9em;font-size:1.05em;color:#eef1f7}.pst .jc-txt .ph{color:#5c6578}
.pst .jc-txt .car{display:inline-block;width:1.5px;height:1.05em;background:#2fb3a2;vertical-align:-.15em;margin-left:1px;animation:pst-car 1s steps(1) infinite}
@keyframes pst-car{50%{opacity:0}}
.pst .jc-auto{display:flex;align-items:center;gap:.5em;color:#2fb3a2;font-size:1.02em;margin:.1em 0 .2em}
.pst .jc-auto .ck.on{background:#2fb3a2;border-color:#2fb3a2;color:#0f2420}.pst .jc-auto .ck.on::after{content:"✓"}
.pst .jc-dly{display:inline-flex;gap:.25em;margin-left:.4em}
.pst .jc-dly i{font-style:normal;min-width:1.8em;text-align:center;padding:.1em .3em;border-radius:.3em;background:#232937;color:#c9cfdb}
.pst .jc-hint{font-size:.9em;color:#f0912d;height:1.5em;transition:opacity .3s}.pst .jc-hint.hide{opacity:0}
.pst .jc-btns{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.6em}
.pst .jc-btns i{font-style:normal;text-align:center;padding:.6em 0;border-radius:.5em;background:#232937;color:#a3abbd;font-size:1.05em;transition:background .3s,color .3s,transform .15s}
.pst .jc-btns .sv{color:#4a5366}.pst .jc-btns .sv.ok{background:#2fb3a2;color:#0f2420;font-weight:700}.pst .jc-btns .sv.press{transform:scale(.94);background:#25998a}
/* หน้า Journal (Trade Detail / Calendar) */
.pst .jp{position:absolute;z-index:12;display:flex;font-size:11px;border-radius:1.6em;overflow:hidden;background:#e9ecf1;font-family:"Segoe UI",Arial,sans-serif;color:#1f2937;
  box-shadow:0 40px 80px -30px rgba(15,18,40,.6);opacity:0;transform:translateY(20px) scale(.96);pointer-events:none;transition:opacity .55s,transform .7s cubic-bezier(.3,1.2,.4,1)}
.pst .jp.in{opacity:1;transform:none}
.pst .jp-side{flex:none;width:15.5em;background:#252b36;color:#c3cad6;padding:1.6em 1em}
.pst .jp-logo{display:flex;align-items:center;gap:.5em;margin-bottom:1.6em}.pst .jp-logo img{width:3em;height:3em;flex:none}.pst .jp-logo b{display:block;font-size:1.45em;color:#fff;line-height:1.15}.pst .jp-logo small{display:block;font-size:.8em;color:#9aa3b2;line-height:1.3;margin-top:.15em}
.pst .jp-nav{display:flex;flex-direction:column;gap:.25em}
.pst .jp-nav i{display:flex;align-items:center;gap:.7em;font-style:normal;color:#c3cad6;font-size:1.1em;padding:.6em .9em;border-radius:.7em;white-space:nowrap;transition:background .3s,color .3s}
.pst .jp-nav i.on{background:linear-gradient(90deg,#2a9d8f,#3cb8a8);color:#fff;font-weight:700}
.pst .jp-nav svg{width:1.25em;height:1.25em;flex:none;color:#9aa3b2}.pst .jp-nav i.on svg{color:#fff}
.pst .jp-nav em{font-style:normal;font-size:.68em;font-weight:800;letter-spacing:.03em;color:#fff;background:#14b8a6;border-radius:99px;padding:.15em .6em}
.pst .jp-main{position:relative;flex:1;min-width:0}
.pst .jp-v{position:absolute;inset:1.4em 1.5em;transition:opacity .4s}.pst .jp-v.hide{opacity:0}
.pst .jp-top{display:flex;align-items:baseline;gap:.9em;margin-bottom:1em}
.pst .jp-top h4{margin:0;font-size:2em;font-weight:800;color:#1f2937}.pst .jp-top span{font-size:1.15em;color:#6b7280}.pst .jp-top .buy{color:#2563eb}
.pst .jp-top em{margin-left:auto;font-style:normal;font-size:1em;font-weight:600;padding:.5em 1em;border-radius:.6em;background:#fff;border:1px solid #d9dde4}
.pst .jp-grid{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:.9em;align-items:start}
.pst .jp-card{background:#fff;border-radius:1em;padding:1em 1.1em;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pst .jp-card h5{margin:.2em 0 .5em;font-size:1.2em;font-weight:800;color:#1f2937}.pst .jp-card h5:not(:first-child){margin-top:1em}
.pst .jp-sum small{color:#6b7280}
.pst .jp-big{font-size:2.2em;font-weight:800;color:#dc2626;margin:.1em 0 .4em;white-space:nowrap}.pst .jp-big span{font-size:.5em;color:#dc2626}
.pst .jp-r{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:1em;padding:.32em 0;color:#6b7280;white-space:nowrap}
.pst .jp-r b{color:#111827;font-weight:700}.pst .jp-r b small{font-weight:400;color:#9ca3af}
.pst .jp-r .buy{color:#2563eb}.pst .jp-r .up{color:#0f9d8a}.pst .jp-r .dn{color:#dc2626}.pst .jp-r .ac{color:#0f9d8a}
.pst .jp-r .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#0f9d8a;margin-right:.4em}
.pst .jp-note{margin:0;font-size:1.05em;color:#374151}
.pst .jp-ch{position:relative;height:15em;border-radius:1em;background:#161a21;margin-bottom:.9em;overflow:hidden}
.pst .jp-ch span{position:absolute;left:1em;top:.7em;color:#e5e7eb;font-weight:700;font-size:1.05em}.pst .jp-ch svg{position:absolute;left:0;top:0}
.pst .jp-hr{display:grid;grid-template-columns:1fr .9fr 1.8fr .6fr;gap:.5em;padding:.45em 0;font-size:1em;color:#374151;border-top:1px solid #eef0f3;white-space:nowrap}
.pst .jp-hr.hd{color:#9ca3af;font-size:.9em;border-top:0}
.pst .jp-hr:not(.hd){opacity:0;transform:translateX(-10px);transition:opacity .45s,transform .45s}.pst .jp-hr.in{opacity:1;transform:none}
.pst .jp-plan i{font-style:normal;display:inline-block;margin-left:.4em;padding:.2em .8em;border-radius:.5em;border:1px solid #d9dde4;color:#6b7280;transition:background .3s,color .3s,border-color .3s}
.pst .jp-plan i.on{background:#0f9d8a;border-color:#0f9d8a;color:#fff;font-weight:700}
.pst .jp-wk{display:grid;grid-template-columns:repeat(7,1fr);font-size:.95em;font-weight:700;color:#9ca3af;padding:0 .2em .5em}
.pst .jp-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:6.6em;background:#fff;border-radius:1em;overflow:hidden;border:1px solid #e5e7eb}
.pst .jp-days i{position:relative;font-style:normal;border-right:1px solid #eef0f3;border-bottom:1px solid #eef0f3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em}
.pst .jp-days i.x{background:#f8f9fb}
.pst .jp-days em{position:absolute;left:.6em;top:.4em;font-style:normal;font-size:.95em;color:#6b7280}
.pst .jp-days .td em{color:#fff;background:#0f9d8a;border-radius:99px;padding:0 .45em}
.pst .jp-days .td b{font-size:1.25em;color:#dc2626}.pst .jp-days .td small{color:#6b7280}
.pst .jp-days .td.hit{background:rgba(220,38,38,.07);animation:pst-cell .8s cubic-bezier(.3,1.5,.5,1)}
@keyframes pst-cell{0%{transform:scale(.8)}100%{transform:none}}
.pst .fin{z-index:14;translate:-50% 0;background:linear-gradient(135deg,#7c3aed,#14b8a6);box-shadow:0 20px 50px -18px rgba(124,58,237,.8)}
/* ผังแนวตั้ง : ตัวอักษรใหญ่ขึ้น · หน้า Journal ซ้อนเป็นแถว */
.pst .port .jc{font-size:13px}.pst .port .jc-set:nth-child(4){display:none}
.pst .port .jp{font-size:15px;flex-direction:column}
.pst .port .jp-side{width:auto;padding:.9em 1em}.pst .port .jp-logo{margin-bottom:.6em}
.pst .port .jp-nav{flex-direction:row;flex-wrap:wrap;gap:.2em}.pst .port .jp-nav i{padding:.3em .6em;font-size:.9em;gap:.4em}
.pst .port .jp-grid{grid-template-columns:1fr 1fr}.pst .port .jp-mid{grid-column:1/-1;order:3}
.pst .port .jp-top em{display:none}
.pst .port .jp-days{grid-auto-rows:6em}
@media(prefers-reduced-motion:reduce){.pst .ts-cloud,.pst .ts-gbar,.pst .ts-live::after,.pst .ts-mist i,.pst .ts-snap,.pst .ts-weld b,.pst .ts-weld i,.pst .ts-glow{animation:none}}