/* ═══════════════════════════════════════════════════════════════════════════
   pcbuild.css — PC Build (/pcbuild · /pcbuild/b/{slug} · /pcbuild/sets) · โหลดต่อจาก home.css (ชุดเดียวกับหน้าแรก: กรอบดำ + พื้นที่ทำงานขาว + lime เป็นจุด/สถานะ)
   ⚠️ grid ทุกอันใช้ minmax(0,1fr) · ตัวเลขใช้ tabular-nums · แอนิเมชันเคารพ prefers-reduced-motion · ไอคอน Boxicons เท่านั้น
   ═══════════════════════════════════════════════════════════════════════════ */
.pb [hidden]{display:none!important}
.pb-num{font-variant-numeric:tabular-nums}
.pb-anchor{display:block;height:0;scroll-margin-top:100px}

/* ── hero + ผู้ช่วยจัดสเปค ── */
.pb .hm-hero{padding:150px 0 70px}
.pb .hm-h1{max-width:18ch}
.pb-assist{position:relative;width:100%;max-width:820px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 6px rgba(212,255,62,.06),0 30px 70px -30px rgba(212,255,62,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:box-shadow .35s,border-color .35s}
.pb-assist:focus-within{border-color:rgba(212,255,62,.7);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 6px rgba(212,255,62,.16),0 30px 80px -30px rgba(212,255,62,.6)}
.pb-assist>i{font-size:24px;color:var(--accent);margin-left:12px;flex-shrink:0}
#pbAssistForm .pb-assist-in{flex:1;min-width:0;height:52px;border:0;background:transparent;color:#fff;font:500 16px 'Prompt',sans-serif;outline:none;padding:0 4px}
#pbAssistForm .pb-assist-in::placeholder{color:rgba(255,255,255,.5)}
.pb-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.pb-chips button{height:34px;padding:0 14px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font:500 13px 'Prompt',sans-serif;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pb-chips button:hover,.pb-chips button.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pb-chips-l{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-right:4px}
.pb-assist-note{margin:14px auto 0;max-width:640px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.6)}
.pb-assist-res{max-width:820px;margin:18px auto 0;text-align:left}
.pb-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:14px;font-size:13.5px;line-height:1.6;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff}
.pb-notice i{font-size:20px;color:var(--accent);flex-shrink:0;margin-top:1px}
.pb-notice.is-err i{color:#FCA5A5}
.pb-announce{display:flex;gap:10px;align-items:center;justify-content:center;max-width:720px;margin:0 auto 22px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13.5px}

/* ── ตัวจัดสเปค ── */
.pb-work{background:var(--bg-soft);padding:46px 0 90px;border-top:1px solid var(--border)}
.pb-app{display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:24px;align-items:start}
.pb-rail{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 108px);overflow:auto;padding-bottom:4px;scrollbar-width:thin}
.pb-card-s{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-soft)}
.pb-sum{padding:20px}
.pb-sum-total{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pb-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pb-big{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.pb-big small{font-size:15px;font-weight:600;color:var(--text-2);letter-spacing:0;margin-left:3px}
.pb-sub{font-size:12.5px;color:var(--text-2);margin-top:4px}
.pb-ring{--v:0;position:relative;width:66px;height:66px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--ink) calc(var(--v)*1%),var(--bg-mute) 0);display:grid;place-items:center}
.pb-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.pb-ring b{position:relative;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.pb-ring small{position:absolute;bottom:-19px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-3)}
.pb-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.pb-kv>div{padding:10px 12px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--border)}
.pb-kv b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.pb-kv span{font-size:11.5px;color:var(--text-3)}
.pb-bud{margin-top:14px}
.pb-bud-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.pb-bud-row input{width:96px;height:32px;border:1px solid var(--border);border-radius:8px;padding:0 8px;font:600 13px 'Prompt',sans-serif;text-align:right;background:#fff}
#pbApp .pb-bud-row input{font-size:13px}
.pb-bar-b{height:8px;border-radius:8px;background:var(--bg-mute);overflow:hidden;margin-top:8px}
.pb-bar-b i{display:block;height:100%;width:0;border-radius:8px;background:var(--ink);transition:width .5s var(--ease)}
.pb-bar-b.is-over i{background:var(--danger)}
.pb-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.pb-acts .pb-btn.is-wide{grid-column:1/-1}
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 14px;border-radius:100px;border:1px solid var(--border-strong);background:#fff;color:var(--ink);font:600 13.5px/1 'Prompt',sans-serif;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .2s,background .2s,border-color .2s,color .2s}
.pb-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.pb-btn i{font-size:18px}
.pb-btn.is-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.pb-btn.is-ink:hover{background:#22232a}
.pb-btn.is-accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pb-btn.is-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.pb-btn.is-sm{height:34px;padding:0 12px;font-size:12.5px}
.pb-btn:disabled,.pb-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.pb-menu{position:relative}
.pb-menu-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);padding:6px}
.pb-menu-list button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;font:500 13.5px 'Prompt',sans-serif;text-align:left;cursor:pointer;color:var(--ink)}
.pb-menu-list button:hover{background:var(--bg-mute)}
.pb-menu-list small{display:block;color:var(--text-3);font-size:11.5px;font-weight:400}
.pb-menu-list i{font-size:20px;color:var(--text-2)}

/* ปัญหา/คำเตือน */
.pb-issues{padding:6px 14px 10px}
.pb-issues h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:10px 0 6px}
.pb-issue{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--border);font-size:12.8px;line-height:1.55;color:var(--text)}
.pb-issue:first-of-type{border-top:0}
.pb-issue i{font-size:18px;flex-shrink:0;margin-top:1px}
.pb-issue.is-error i{color:var(--danger)}
.pb-issue.is-warn i{color:var(--warn)}
.pb-issue.is-info i{color:var(--info)}
.pb-ok{display:flex;gap:9px;align-items:center;padding:12px 14px;font-size:13px;color:#047857;font-weight:600}
.pb-ok i{font-size:20px}

/* ช่องชิ้นส่วนของชุด */
.pb-slots{padding:8px}
.pb-slot{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:9px 10px;border-radius:12px;border:1px solid transparent;background:transparent;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.pb-slot:hover{background:var(--bg-soft)}
.pb-slot.is-on{background:var(--accent-soft);border-color:rgba(184,224,51,.6)}
.pb-slot-ic{width:38px;height:38px;border-radius:10px;background:var(--bg-mute);display:grid;place-items:center;font-size:20px;color:var(--text-2);overflow:hidden}
.pb-slot-ic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pb-slot.is-filled .pb-slot-ic{background:#fff;border:1px solid var(--border)}
.pb-slot-t{min-width:0}
.pb-slot-t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-slot-t span{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-slot-p{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.pb-slot-p button{display:block;margin-left:auto;margin-top:2px;border:0;background:transparent;color:var(--text-3);font-size:11.5px;cursor:pointer;font-family:inherit;text-decoration:underline}
.pb-slot-p button:hover{color:var(--danger)}
.pb-slot-sub{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:2px 0 0 48px;font-size:12px;color:var(--text-2)}
.pb-req{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--danger);margin-left:6px}

/* แถบหมวด + เครื่องมือกรอง */
.pb-main{min-width:0}
.pb-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pb-tab{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:100px;border:1px solid var(--border-strong);background:#fff;font:600 13.5px 'Prompt',sans-serif;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pb-tab i{font-size:18px}
.pb-tab em{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bg-mute);font-size:11px;display:grid;place-items:center;color:var(--text-2)}
.pb-tab:hover{border-color:var(--ink)}
.pb-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.pb-tab.is-on em{background:var(--accent);color:var(--ink)}
.pb-tab.is-done:not(.is-on){border-color:rgba(16,185,129,.55);background:#F0FDF7}
.pb-tab.is-done i.pb-chk{color:var(--good)}
.pb-tab.is-empty{opacity:.55}
.pb-tools{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,170px));gap:10px;margin-bottom:12px}
.pb-field{position:relative;display:flex;align-items:center}
.pb-field>i{position:absolute;left:14px;font-size:19px;color:var(--text-3);pointer-events:none}
.pb-field input,.pb-field select{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:100px;background:#fff;padding:0 16px;font:500 14px 'Prompt',sans-serif;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.pb-field input{padding-left:42px}
.pb-field select{padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352576A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.pb-field input:focus,.pb-field select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(10,10,11,.06)}
#pbApp .pb-field input,#pbApp .pb-field select{font-size:14px}
.pb-switch{display:flex;align-items:center;gap:10px;margin:2px 0 14px;font-size:13px;color:var(--text-2)}
.pb-switch input{appearance:none;-webkit-appearance:none;width:40px;height:23px;border-radius:23px;background:var(--border-strong);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;margin:0}
.pb-switch input::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pb-switch input:checked{background:var(--ink)}
.pb-switch input:checked::after{transform:translateX(17px)}
.pb-switch b{font-weight:600;color:var(--ink)}
.pb-count{font-size:12.5px;color:var(--text-3);margin:0 0 10px}

/* การ์ดสินค้า */
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.pb-pc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.pb-pc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
.pb-pc-img{position:relative;aspect-ratio:1/1;background:var(--bg-soft);display:grid;place-items:center;overflow:hidden}
.pb-pc-img img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.pb-pc-img>i{font-size:54px;color:var(--text-4)}
.pb-pc-badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;font-size:11.5px;font-weight:700;background:#fff;border:1px solid var(--border)}
.pb-pc-badge.is-warn{background:#FFFBEB;border-color:#FCD34D;color:#92400E}
.pb-pc-badge.is-bad{background:#FEF2F2;border-color:#FCA5A5;color:#B91C1C}
.pb-pc-badge.is-good{background:#ECFDF5;border-color:#6EE7B7;color:#047857}
.pb-pc-perf{position:absolute;right:10px;top:10px;height:24px;padding:0 9px;border-radius:12px;font-size:11.5px;font-weight:700;background:var(--ink);color:var(--accent);display:inline-flex;align-items:center;gap:4px}
.pb-pc-body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 14px;flex:1}
.pb-pc-brand{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pb-pc-name{font-size:13.8px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pb-pc-sum{font-size:12px;color:var(--text-2);line-height:1.5;min-height:1.5em}
.pb-pc-price{margin-top:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pb-pc-price b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pb-pc-price span{font-size:12px;color:var(--text-3)}
.pb-pc-note{font-size:11.5px;color:#B45309;line-height:1.45}
.pb-pc.is-bad .pb-pc-img,.pb-pc.is-bad .pb-pc-body>*:not(.pb-pc-act){opacity:.5}
.pb-pc-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:8px}
.pb-empty{grid-column:1/-1;text-align:center;padding:54px 20px;border:1px dashed var(--border-strong);border-radius:18px;background:#fff;color:var(--text-2)}
.pb-empty i{font-size:42px;color:var(--text-4);display:block;margin-bottom:8px}
.pb-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.pb-skel{height:340px;border-radius:18px;background:linear-gradient(100deg,var(--bg-mute) 30%,#fff 50%,var(--bg-mute) 70%);background-size:200% 100%;animation:pbSk 1.3s linear infinite}
@keyframes pbSk{to{background-position:-200% 0}}
.pb-pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:22px;flex-wrap:wrap}
.pb-pager button{min-width:38px;height:38px;border-radius:100px;border:1px solid var(--border-strong);background:#fff;font:600 13px 'Prompt',sans-serif;cursor:pointer;padding:0 10px}
.pb-pager button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pb-pager button:disabled{opacity:.4;cursor:not-allowed}

/* ลิ้นชักเทียบร้าน */
.pb-dr{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end}
.pb-dr-bg{position:absolute;inset:0;background:rgba(10,10,11,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:pbFade .25s}
.pb-dr-box{position:relative;width:min(480px,100%);height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);animation:pbSlide .35s var(--ease)}
@keyframes pbFade{from{opacity:0}}
@keyframes pbSlide{from{transform:translateX(40px);opacity:0}}
.pb-dr-h{display:flex;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
.pb-dr-h img{width:56px;height:56px;border-radius:12px;object-fit:contain;background:var(--bg-soft);flex-shrink:0}
.pb-dr-h h3{font-size:15px;font-weight:700;line-height:1.35}
.pb-dr-h p{font-size:12px;color:var(--text-3)}
.pb-x{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:22px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;color:var(--ink)}
.pb-x:hover{border-color:var(--ink)}
.pb-dr-b{flex:1;overflow:auto;padding:16px 20px 24px}
.pb-of{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:#fff}
.pb-of.is-best{border-color:var(--accent-dark);background:var(--accent-soft)}
.pb-of.is-on{box-shadow:0 0 0 2px var(--ink)}
.pb-of img{width:48px;height:48px;border-radius:10px;object-fit:contain;background:var(--bg-soft)}
.pb-of-t{min-width:0}
.pb-of-t b{display:block;font-size:12.8px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-store{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:10px;background:var(--c,#52576A);color:#fff;font-size:10.5px;font-weight:700;margin-top:4px}
.pb-of-t small{display:block;font-size:11px;color:var(--text-3);margin-top:3px}
.pb-of-p{text-align:right}
.pb-of-p b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.pb-of-p s{font-size:11.5px;color:var(--text-3)}
.pb-of-p .pb-btn{margin-top:6px}
.pb-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:10px;font-size:10.5px;font-weight:700;background:var(--bg-mute);color:var(--text-2);margin-left:6px}
.pb-tag.is-best{background:var(--ink);color:var(--accent)}
.pb-tag.is-stale{background:#FFFBEB;color:#92400E}
.pb-spark{margin:6px 0 16px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-soft)}
.pb-spark svg{display:block;width:100%;height:64px}
.pb-spark p{font-size:11.5px;color:var(--text-3);margin-top:6px}

/* modal */
.pb-md{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.pb-md-bg{position:absolute;inset:0;background:rgba(10,10,11,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:pbFade .25s}
.pb-md-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:22px;padding:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:pbPop .35s var(--ease)}
@keyframes pbPop{from{transform:translateY(14px) scale(.98);opacity:0}}
.pb-md-box h3{font-size:19px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;margin-bottom:6px}
.pb-md-box h3 i{font-size:24px}
.pb-md-box>p{font-size:13.5px;color:var(--text-2);margin-bottom:16px}
.pb-md-box .pb-x{position:absolute;right:14px;top:14px}
.pb-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text-2);margin:12px 0 6px}
.pb-in{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:12px;padding:0 14px;font:500 14px 'Prompt',sans-serif;color:var(--ink);outline:none;background:#fff}
textarea.pb-in{height:80px;padding:10px 14px;resize:vertical}
#pbApp .pb-in,.pb-md .pb-in{font-size:14px}
.pb-in:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(10,10,11,.06)}
.pb-md-act{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.pb-md-act .pb-btn{flex:1 1 140px}
.pb-linkbox{display:flex;gap:8px;margin-top:6px}
.pb-linkbox input{flex:1;min-width:0}
.pb-uses{display:flex;flex-wrap:wrap;gap:6px}
.pb-uses button{height:34px;padding:0 13px;border-radius:100px;border:1px solid var(--border-strong);background:#fff;font:600 12.5px 'Prompt',sans-serif;cursor:pointer;color:var(--ink)}
.pb-uses button.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* toast */
.pb-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,24px);z-index:120;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:100px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;box-shadow:0 20px 50px -14px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.pb-toast.is-on{opacity:1;transform:translate(-50%,0)}
.pb-toast i{font-size:20px;color:var(--accent)}
.pb-toast.is-err i{color:#FCA5A5}

/* แถบล่างมือถือ */
.pb-bar{display:none}

/* ── ชุดแนะนำ / การ์ดชุด ── */
.pb-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pb-set{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-soft);transition:transform .4s var(--ease),box-shadow .4s;color:var(--ink)}
.pb-set:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pb-svc--dark .pb-set,.hm-svc--dark .pb-set{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.pb-set-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pb-set-h b{font-size:15px;font-weight:700;line-height:1.35}
.pb-grade{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font-size:18px;font-weight:800;flex-shrink:0}
.pb-set-price{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pb-set-price small{font-size:13px;font-weight:600;opacity:.7;margin-left:3px}
.pb-set ul{display:flex;flex-direction:column;gap:5px;font-size:12.5px;opacity:.85}
.pb-set li{display:flex;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-set li b{flex-shrink:0;width:82px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;padding-top:1px}
.pb-set li span{overflow:hidden;text-overflow:ellipsis}
.pb-set-f{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:12px;opacity:.75}
.pb-budgets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pb-budgets a{height:38px;padding:0 16px;border-radius:100px;border:1px solid var(--border-strong);display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff}
.pb-budgets a.is-on,.pb-budgets a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ═════════ หน้าสรุปชุด (/pcbuild/b/{slug}) ═════════ */
.pb-sh{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;padding:140px 0 56px}
.pb-sh .hm-wrap{position:relative;z-index:1}
.pb-sh-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:end}
.pb-sh h1{font-size:clamp(30px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:14px 0 8px}
.pb-sh .pb-total{font-size:clamp(28px,3.4vw,44px);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pb-sh .pb-total small{font-size:.45em;font-weight:600;color:rgba(255,255,255,.7);margin-left:6px}
.pb-metas{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pb-meta{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:100px;font-size:12.5px;font-weight:500;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.pb-meta i{font-size:16px;color:var(--accent)}
.pb-scorecard{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pb-scorecard .pb-eyebrow{color:rgba(255,255,255,.6)}
.pb-scorecard-n{display:flex;align-items:flex-end;gap:12px;margin:6px 0 10px}
.pb-scorecard-n b{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pb-scorecard-n span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--ink);font-size:20px;font-weight:800;margin-bottom:4px}
.pb-scorecard .pb-bar-b{background:rgba(255,255,255,.12)}
.pb-scorecard .pb-bar-b i{background:var(--accent)}
.pb-scorecard p{font-size:12.5px;color:rgba(255,255,255,.75);margin-top:10px;line-height:1.6}
.pb-scorecard details{margin-top:10px;font-size:12px;color:rgba(255,255,255,.7)}
.pb-scorecard summary{cursor:pointer;font-weight:600;color:#fff}
.pb-scorecard details p{margin-top:6px}

.pb-sec{padding:52px 0 0}
.pb-sec h2{font-size:22px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.pb-sec h2 i{font-size:26px}
.pb-diag{padding:26px 10px;border-radius:24px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-soft);overflow:hidden}
.pb-diag svg{display:block;width:100%;height:auto;max-width:1040px;margin:0 auto}
.pb-diag text{font-family:'Prompt',sans-serif}
.pb-hx-line{stroke:var(--border-strong);stroke-width:1.2;stroke-dasharray:3 4}
.pb-hx-draw{stroke-dasharray:5 6;animation:pbDash 1.2s var(--ease) both}
@keyframes pbDash{from{stroke-dashoffset:60;opacity:0}}
.pb-hexgrid{display:none}
.pb-hex{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0;cursor:pointer;background:none;border:0;padding:0;font-family:inherit;color:inherit}
.pb-hex-i{position:relative;width:100%;aspect-ratio:1/1.1547;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--ink);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pb-hex-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.pb-hex b{font-size:11.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-hex span{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.pb-hex.is-off .pb-hex-i{background:var(--dk-1)}
.pb-hex.is-off b{color:var(--text-3);font-weight:500}

.pb-tbl-w{border:1px solid var(--border);border-radius:20px;background:#fff;overflow:hidden;box-shadow:var(--shadow-soft)}
.pb-tbl-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--border)}
.pb-tbl-h h2{margin:0}
.pb-tbl-act{display:flex;gap:8px;flex-wrap:wrap}
.pb-tbl{width:100%;border-collapse:collapse}
.pb-tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:10px 14px;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.pb-tbl td{padding:14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13.5px}
.pb-tbl tr:last-child td{border-bottom:0}
.pb-tbl .pb-cat{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;white-space:nowrap}
.pb-tbl .pb-cat i{width:32px;height:32px;border-radius:10px;background:var(--bg-mute);display:grid;place-items:center;font-size:18px}
.pb-prod{display:flex;gap:12px;align-items:center;min-width:240px}
.pb-prod img{width:52px;height:52px;border-radius:12px;object-fit:contain;background:var(--bg-soft);border:1px solid var(--border);flex-shrink:0}
.pb-prod b{font-size:13.5px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-prod small{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px}
.pb-price-c{text-align:right;white-space:nowrap}
.pb-price-c b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;display:block}
.pb-price-c s{font-size:11.5px;color:var(--text-3)}
.pb-row-act{display:flex;gap:6px;justify-content:flex-end}
.pb-tbl tfoot td{background:var(--bg-soft);font-weight:700;font-size:15px}
.pb-chk-c{width:34px}
.pb-chk{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border-strong);background:#fff;cursor:pointer;position:relative;margin:0}
.pb-chk:checked{background:var(--ink);border-color:var(--ink)}
.pb-chk:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.pb-list-o{display:flex;flex-direction:column;gap:8px}
.pb-bundle-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px}
.pb-bundle-row.is-done{background:#F0FDF7;border-color:rgba(16,185,129,.5)}
.pb-bundle-row b{font-size:13px;font-weight:600;line-height:1.35;display:block}
.pb-bundle-row small{font-size:11.5px;color:var(--text-3)}
.pb-prog{height:8px;border-radius:8px;background:var(--bg-mute);overflow:hidden;margin:6px 0 14px}
.pb-prog i{display:block;height:100%;width:0;background:var(--good);border-radius:8px;transition:width .4s var(--ease)}

.pb-2c{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
.pb-panel{padding:20px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.pb-panel h2{margin-bottom:12px;font-size:18px}
.pb-chart svg{display:block;width:100%;height:150px}
.pb-chart p{font-size:12px;color:var(--text-3);margin-top:8px;line-height:1.6}
.pb-disc{margin:30px 0 0;font-size:12px;line-height:1.7;color:var(--text-3)}
.pb-fork{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:22px;border-radius:22px;background:var(--ink);color:#fff;margin-top:22px}
.pb-fork b{font-size:18px;font-weight:700;display:block}
.pb-fork span{font-size:13px;color:rgba(255,255,255,.7)}
.pb-snap{background:#fff}

/* ── responsive ── */
@media (max-width:1100px){
  .pb-app{grid-template-columns:minmax(0,1fr)}
  .pb-rail{position:static;max-height:none;overflow:visible}
  .pb-sh-grid{grid-template-columns:minmax(0,1fr)}
  .pb-2c{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .pb-diag{display:none}
  .pb-hexgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;padding:6px 2px}
  .pb-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pb-tools .pb-field:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .pb-tbl thead{display:none}
  .pb-tbl,.pb-tbl tbody,.pb-tbl tr,.pb-tbl td,.pb-tbl tfoot{display:block;width:100%}
  .pb-tbl tr{padding:14px;border-bottom:1px solid var(--border)}
  .pb-tbl td{padding:4px 0;border:0}
  .pb-tbl .pb-price-c{display:flex;justify-content:space-between;align-items:center;text-align:left;margin-top:6px}
  .pb-row-act{justify-content:flex-start;margin-top:6px}
  .pb-tbl tfoot tr{background:var(--bg-soft);display:flex;justify-content:space-between}
  .pb-chk-c{display:none!important}
  .pb-prod{min-width:0}
}
@media (max-width:640px){
  .pb .hm-hero{padding:120px 0 52px}
  .pb-work{padding:30px 0 120px}
  .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pb-pc-body{padding:11px}
  .pb-pc-name{font-size:12.8px}
  .pb-pc-price b{font-size:16px}
  .pb-pc-act{grid-template-columns:minmax(0,1fr)}
  .pb-assist{flex-wrap:wrap;border-radius:20px}
  .pb-assist .hm-btn{width:100%}
  .pb-assist>i{display:none}
  #pbAssistForm .pb-assist-in{padding:0 10px}
  .pb-dr-box{width:100%;height:88%;align-self:flex-end;border-radius:22px 22px 0 0;animation-name:pbUp}
  .pb-dr{align-items:flex-end}
  @keyframes pbUp{from{transform:translateY(40px);opacity:0}}
  .pb-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,11,.96);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.1)}
  .pb-bar-t{flex:1;min-width:0}
  .pb-bar-t b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1.1}
  .pb-bar-t span{font-size:11.5px;color:rgba(255,255,255,.7)}
  .pb-bar .pb-btn{height:40px}
  .pb-rail .pb-acts{grid-template-columns:minmax(0,1fr)}
  .pb-sh{padding:120px 0 40px}
  .pb-hexgrid{gap:16px 10px}
  .pb-scorecard-n b{font-size:46px}
  .pb-fork{padding:18px}
  .pb-fork .pb-btn{width:100%}
  .pb-sets{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .pb *,.pb *::before,.pb *::after{animation:none!important;transition:none!important}
}

/* จุดดาวของหัวหน้าสรุป (เหมือน hm-mini · dt-fx.js ขยับตามเมาส์) */
.pb-sh canvas.dt-dots{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,#000 25%,transparent 85%)}