
/* ===== st-fit: เรื่องเล่า — จัดสัดส่วนหน้าให้พอดี + ปุ่มมีมิติ (ใช้เฉพาะโปรเจกต์ประเภทเรื่องเล่า) ===== */
body.stproj{padding-bottom:80px}

/* --- 1) สัดส่วน: จัดทุกอย่างให้อยู่คอลัมน์เดียวกัน กว้างพอดีอ่านสบาย --- */
body.stproj section.page.stp{max-width:1000px;width:100%;margin:0 auto;padding:0}
body.stproj .subbar .top,
body.stproj .subbar .tabs{max-width:1000px;margin-left:auto;margin-right:auto}
body.stproj[data-pg] .stp .panel{padding:24px 28px 30px;border-radius:16px}
body.stproj .stp .panel>h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 4px;font-size:26px;line-height:1.25}
body.stproj .stp .panel>h2 span{margin:0;font-size:14px}
body.stproj .stp .nsc{margin-top:18px;padding:20px 22px 22px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -14px rgba(0,0,0,.7)}
body.stproj .stp .nsh{margin-bottom:14px}
body.stproj .stp .nsh b{font-size:18px}
body.stproj .stp label{margin:16px 0 7px;font-size:14.5px;font-weight:600;color:#cfcfcf}
body.stproj .stp .nsc>label:first-child{margin-top:0}
body.stproj .stp .stinfo,body.stproj .stp .stmsg{line-height:1.55}
body.stproj .stp .nsrow{gap:14px 16px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}
body.stproj .stp .nsdur{gap:10px;font-size:14.5px}
body.stproj .stp details.nsd{margin-top:14px;padding-top:12px}
body.stproj .stp details.nsd>summary{padding:6px 2px;font-size:14.5px;font-weight:600;border-radius:8px;transition:color .15s}
body.stproj .stp details.nsd>summary:hover{color:#fff}
body.stproj .stp details.nsd>summary:active{transform:translateY(1px)}

/* ช่องพิมพ์: ขนาดพอดีมือ อ่านภาษาไทยสบาย */
body.stproj[data-pg] .stp .panel :is(input[type=text],input[type=number],input[type=password],textarea,select){
  background:#0f0f10;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:11px 14px;font-size:16px;line-height:1.55;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05);
  transition:border-color .18s,box-shadow .18s,background-color .18s}
body.stproj[data-pg] .stp .panel :is(input[type=text],input[type=number],input[type=password],textarea,select):hover{border-color:rgba(255,255,255,.22)}
body.stproj[data-pg] .stp .panel :is(input[type=text],input[type=number],input[type=password],textarea,select):focus{
  outline:0;border-color:#E50914;background:#141011;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 3px rgba(229,9,20,.28)}
body.stproj[data-pg] .stp .panel ::placeholder{color:#7a7a80}
body.stproj .stp textarea{resize:vertical;line-height:1.75}
body.stproj .stp textarea[data-f=raw]{min-height:170px}
body.stproj .stp textarea[data-f=script]{min-height:340px}
body.stproj .stp input[data-f=title]{font-weight:700;font-size:18px}
body.stproj .stp input[data-f=hook]{font-weight:600}

/* กล่องวางไฟล์เสียง: ชัดว่ากดได้ / ลากวางได้ */
body.stproj .stp label.nsdrop{padding:26px 16px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.22);background:rgba(0,0,0,.18);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);transition:background .18s,border-color .18s,transform .15s,box-shadow .18s}
body.stproj .stp label.nsdrop:hover,body.stproj .stp label.nsdrop.drag{background:rgba(229,9,20,.07);border-color:rgba(229,9,20,.6);transform:translateY(-1px)}
body.stproj .stp label.nsdrop:active{transform:translateY(1px) scale(.995);box-shadow:inset 0 3px 10px rgba(0,0,0,.5)}
body.stproj .stp label.nsdrop.has{border-style:solid;border-color:rgba(229,9,20,.7);background:rgba(229,9,20,.06)}
body.stproj .stp label.nsdrop b{font-size:15px;color:#fff;margin:0}
body.stproj .stp .nsdi{font-size:30px;line-height:1}

/* --- 2) ปุ่มมีมิติ: นูนตอนปกติ ลอยตอนชี้ กดแล้วจมลง --- */
body.stproj[data-pg] .stp .panel button:not(.nslink),
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save){
  position:relative;border:0;border-radius:11px;color:#fff;font-weight:600;font-size:15px;
  padding:9px 18px;min-height:38px;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#505054 0%,#38383b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.35),0 3px 0 #0b0b0c,0 9px 16px -4px rgba(0,0,0,.55);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),filter .15s}
body.stproj[data-pg] .stp .panel button.pri:not(.nslink),
body.stproj[data-pg] .subbar .top #save{
  background:linear-gradient(180deg,#ff2f3b 0%,#d10a15 55%,#b3060f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.25),0 3px 0 #6b0409,0 10px 22px -4px rgba(229,9,20,.5)}
body.stproj[data-pg] .subbar .top #save.ok{
  background:linear-gradient(180deg,#2fcf6b 0%,#1c9a4c 55%,#15803d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.25),0 3px 0 #0b4a22,0 10px 22px -4px rgba(34,197,94,.4)}

/* ชี้เมาส์: ลอยขึ้น */
body.stproj[data-pg] .stp .panel button:not(.nslink):hover:not(:disabled),
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):hover{
  transform:translateY(-2px);filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.35),0 5px 0 #0b0b0c,0 14px 22px -4px rgba(0,0,0,.6)}
body.stproj[data-pg] .stp .panel button.pri:not(.nslink):hover:not(:disabled),
body.stproj[data-pg] .subbar .top #save:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.25),0 5px 0 #6b0409,0 16px 28px -4px rgba(229,9,20,.6)}

/* กดลง: จมลงไปติดพื้น เงาด้านล่างหาย เกิดเงาด้านในแทน */
body.stproj[data-pg] .stp .panel button:not(.nslink):active:not(:disabled),
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):active{
  transform:translateY(3px) scale(.985);filter:brightness(.92);transition-duration:.05s;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 #0b0b0c,0 1px 3px rgba(0,0,0,.5)}
body.stproj[data-pg] .stp .panel button.pri:not(.nslink):active:not(:disabled),
body.stproj[data-pg] .subbar .top #save:active{
  box-shadow:inset 0 3px 8px rgba(0,0,0,.45),0 0 0 #6b0409,0 2px 6px rgba(229,9,20,.4)}

body.stproj[data-pg] .stp .panel button:not(.nslink):focus-visible,
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):focus-visible{outline:2px solid #fff;outline-offset:3px}
body.stproj[data-pg] .stp .panel button:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:grayscale(.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #0b0b0c}

/* ปุ่มใหญ่ (แกะเสียง + เขียนสคริปต์) */
body.stproj .stp .nsrow .pri{padding:12px 24px;font-size:16px;min-height:46px;border-radius:12px}

/* ลิงก์ "แกะเสียงอย่างเดียว": ไม่นูน แต่ตอบสนองตอนกด */
body.stproj .stp .nslink{padding:8px 6px;border-radius:8px;transition:color .15s,transform .08s}
body.stproj .stp .nslink:hover{color:#fff}
body.stproj .stp .nslink:active{transform:translateY(1px);color:#ff8a8f}
body.stproj .stp .nslink:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* แท็บด้านบน: กดแล้วยุบลงเล็กน้อย */
body.stproj .tabs a.sx{border-radius:10px 10px 0 0;transition:color .2s,background-color .2s,transform .08s}
body.stproj .tabs a.sx:hover{background:rgba(255,255,255,.05)}
body.stproj .tabs a.sx:active{transform:translateY(2px);background:rgba(0,0,0,.25)}

/* การ์ดอื่น ๆ ในแท็บพากย์เสียง / กราฟิก / ค้นหาวิดีโอ / ซับ */
body.stproj .stp .stvr{border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09)}
body.stproj .stp .stgrid{gap:16px}
body.stproj .stp .stg{box-shadow:0 10px 24px -10px rgba(0,0,0,.7);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
body.stproj .stp .stg:hover{transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(0,0,0,.8)}
body.stproj .stp details.stai{border-radius:14px}


/* แถบหัวเรื่อง: ชื่อเรื่องยืดหดได้ ปุ่มอยู่แถวเดียวกัน ไม่ตกบรรทัด */
body.stproj .subbar .top{flex-wrap:nowrap;gap:10px}
body.stproj .subbar .top .sp{display:none}
body.stproj[data-pg] .subbar #pname{flex:1 1 160px;min-width:0;width:auto;font-size:30px;text-overflow:ellipsis}
body.stproj .subbar .top #st{flex:none;white-space:nowrap}
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save){flex:none;white-space:nowrap;padding:8px 16px;min-height:38px}
@media (max-width:760px){body.stproj .subbar .top{flex-wrap:wrap}body.stproj[data-pg] .subbar #pname{flex:1 1 100%}}

@media (max-width:700px){
  body.stproj[data-pg] .stp .panel{padding:18px 16px 22px}
  body.stproj .stp .nsc{padding:16px 14px 18px}
  body.stproj .stp .panel>h2{font-size:22px}
  body.stproj .stp .nsrow .pri{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  body.stproj[data-pg] .stp .panel button,
  body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save),
  body.stproj .stp label.nsdrop,body.stproj .stp .stg{transition:none}
  body.stproj[data-pg] .stp .panel button:hover,body.stproj[data-pg] .stp .panel button:active,
  body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):hover,
  body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):active{transform:none}
}

/* ===== ปุ่มหลัก 2 ปุ่ม + ตัวเล่นเสียงตัวอย่าง ===== */
body.stproj .stp .nsrow{align-items:stretch}
body.stproj .stp .nsdur{align-self:center}
body.stproj .stp .nsacts{flex:1 1 440px;display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
body.stproj[data-pg] .stp .panel .nsacts button{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;min-height:58px;padding:10px 16px;border-radius:13px}
body.stproj .stp .nsacts button b{font-size:16px;font-weight:700;line-height:1.3}
body.stproj .stp .nsacts button small{font-size:12px;font-weight:400;line-height:1.3;opacity:.78}
body.stproj .stp .nsplay{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
body.stproj .stp .nsplay[hidden]{display:none}
body.stproj .stp .nspl{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.stproj .stp .nspn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600;color:#fff}
body.stproj[data-pg] .stp .panel button.nsrm{flex:none;min-height:30px;padding:4px 12px;font-size:13px;border-radius:9px}
body.stproj .stp .nsplay audio{display:block;width:100%;height:44px;margin-top:10px;color-scheme:dark;border-radius:10px}
body.stproj .stp .nsph{margin-top:8px;font-size:13px;color:var(--mute)}
@media (max-width:700px){body.stproj .stp .nsacts{grid-template-columns:1fr}}

/* ===== สไตล์ Netflix: ปุ่มกะทัดรัด เรียบ มุมมนน้อย กดแล้วยุบเล็กน้อย ===== */
body.stproj[data-pg] .stp .panel button:not(.nslink),
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save){
  background:rgba(109,109,110,.7);border-radius:4px;font-size:15px;font-weight:600;color:#fff;
  min-height:38px;padding:7px 18px;letter-spacing:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35);filter:none;
  transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease,filter .15s ease}
body.stproj[data-pg] .stp .panel button.pri:not(.nslink),
body.stproj[data-pg] .subbar .top #save{
  background:#E50914;box-shadow:0 2px 8px rgba(229,9,20,.35)}
body.stproj[data-pg] .subbar .top #save.ok{background:#1f8f4a;box-shadow:0 2px 8px rgba(34,197,94,.3)}
body.stproj[data-pg] .stp .panel button:not(.nslink):hover:not(:disabled),
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):hover{
  background:rgba(130,130,132,.85);transform:translateY(-1px);filter:none;
  box-shadow:0 5px 14px rgba(0,0,0,.45)}
body.stproj[data-pg] .stp .panel button.pri:not(.nslink):hover:not(:disabled),
body.stproj[data-pg] .subbar .top #save:hover{
  background:#f6121d;box-shadow:0 6px 16px rgba(229,9,20,.45)}
body.stproj[data-pg] .stp .panel button:not(.nslink):active:not(:disabled),
body.stproj[data-pg] .subbar .top :is(#xdoc,#opjson,#save):active{
  transform:scale(.96) translateY(1px);filter:brightness(.88);transition-duration:.05s;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
body.stproj[data-pg] .stp .panel button.pri:not(.nslink):active:not(:disabled),
body.stproj[data-pg] .subbar .top #save:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
body.stproj[data-pg] .stp .panel button:disabled{opacity:.45;filter:none;box-shadow:none}

/* สองปุ่มหลัก: ขนาดพอดี ไม่ยืดเต็มแถว */
body.stproj .stp .nsrow{align-items:center}
body.stproj .stp .nsacts{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:10px}
body.stproj[data-pg] .stp .panel .nsacts button{width:auto;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:4px;font-size:16px;font-weight:700;white-space:nowrap}
body.stproj .stp .nsrow .pri{padding:0 22px;min-height:44px;font-size:16px;border-radius:4px}
@media (max-width:700px){body.stproj .stp .nsacts{width:100%}body.stproj[data-pg] .stp .panel .nsacts button{flex:1 1 100%}}

/* timer + status */
.stp .stmsg.busy{display:flex;align-items:center;gap:10px;color:var(--ink)}
.stp .nsspin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#E50914;animation:nsRot .8s linear infinite;flex:none}
.stp .nstime{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:#fff;white-space:nowrap}
@keyframes nsRot{to{transform:rotate(360deg)}}
/* right-hand AI settings dock */
.stp .nsdock{position:fixed;top:112px;right:0;bottom:16px;width:320px;max-width:calc(100vw - 40px);z-index:40;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.stp .nsdock.off{transform:translateX(100%)}
.stp .nsdock .nsside{height:100%;overflow:auto;background:#141414;border:1px solid #2a2a2a;border-right:0;border-radius:6px 0 0 6px;box-shadow:-14px 0 30px -18px rgba(0,0,0,.9);padding:14px 16px 18px}
.stp .nstab{position:absolute;left:-30px;top:14px;width:30px;padding:12px 0!important;writing-mode:vertical-rl;background:#141414!important;color:#e5e5e5!important;border:1px solid #2a2a2a!important;border-right:0!important;border-radius:6px 0 0 6px!important;font-size:13px!important;font-weight:600;cursor:pointer;box-shadow:none!important;min-height:0!important}
.stp .nstab:hover{color:#fff!important;background:#1f1f1f!important}
.stp .nssh{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.stp .nssh b{font-size:16px}.stp .nssh em{font-style:normal;font-size:12px;color:#ffb74d}
.stp .nssb>b{font-size:14px;display:block;margin-top:6px}.stp .nssb .nssb2{margin-top:20px}
@media (min-width:1100px){body.stproj section.page.stp.nsdocked{padding-right:336px}}
/* compact netflix-style file picker */
body.stproj[data-pg] .stp label.nsdrop{flex-direction:row;min-height:46px;padding:10px 16px;border-radius:4px;border:1px dashed #3a3a3a;background:#141414;gap:10px;transform:none}
body.stproj[data-pg] .stp label.nsdrop b{font-size:14px;font-weight:500;color:#b3b3b3}
body.stproj[data-pg] .stp label.nsdrop:hover,body.stproj[data-pg] .stp label.nsdrop.drag{background:#1a1a1a;border-color:#E50914;transform:none}
body.stproj[data-pg] .stp label.nsdrop:hover b,body.stproj[data-pg] .stp label.nsdrop.drag b{color:#fff}
body.stproj[data-pg] .stp label.nsdrop.has{border:1px solid #E50914;background:#141414}
body.stproj[data-pg] .stp label.nsdrop.has b{color:#fff;font-weight:600}
body.stproj[data-pg] .stp label.nsdrop:active{box-shadow:none}
#nsdz.nsdrop{width:56px;height:56px;min-height:0;padding:0;border-radius:10px;margin:4px 0 6px;flex:none;box-sizing:border-box;justify-content:center;align-items:center}
#nsdz.nsdrop b{font-size:26px;line-height:1;font-weight:500;color:#b3b3b3}
#nsdz.nsdrop.has b,#nsdz.nsdrop:hover b{color:#fff}

/* voice page */
.stp .vrow{display:grid;grid-template-columns:minmax(210px,1fr) 2fr;gap:14px}
@media (max-width:700px){.stp .vrow{grid-template-columns:1fr}}
.stp .vact{align-items:center;gap:14px;margin-top:14px}
.stp .vact .stinfo{margin:0}
/* หน้าพากย์เสียง: แผงเสียง+สไตล์ (เล็ก) อยู่ซ้าย · สคริปต์ (ใหญ่) อยู่ขวา */
.stp .vgrid{display:flex;gap:14px;align-items:flex-start;margin-top:18px}
body.stproj .stp .vgrid>.nsc{margin-top:0}
body.stproj .stp .vgrid>.nsc.vleft{flex:0 0 264px;width:264px;padding:12px 12px 14px;border-radius:12px}
body.stproj .stp .vgrid>.nsc.vright{flex:1 1 0;min-width:0}
.stp .vleft>label{font-size:12.5px;margin-top:12px}
.stp .vleft>label:first-child{margin-top:0}
body.stproj[data-pg] .stp .panel .vleft button.vcur{padding:7px 11px!important}
.stp .vleft .vcur b{font-size:13.5px}
.stp .vleft .vcur small{font-size:11px}
.stp .vleft .vchips{gap:5px}
body.stproj[data-pg] .stp .panel .vleft button.vchip{padding:4px 10px!important;font-size:12px!important}
.stp .vleft input[type=text]{font-size:12.5px;padding:7px 10px;margin-top:8px!important}
.stp .vleft .vlist{max-height:280px;padding:4px}
body.stproj[data-pg] .stp .panel .vleft button.vitem{padding:7px 9px!important;gap:9px}
.stp .vleft .vitem b{font-size:13px}
.stp .vleft .vitem small{font-size:11px}
.stp .vleft .vgh{padding:7px 9px 3px;font-size:12px}
@media(max-width:820px){.stp .vgrid{flex-direction:column}body.stproj .stp .vgrid>.nsc.vleft{flex:none;width:100%}}
/* หน้าบทเรื่อง: การ์ดสร้างบทจากไฟล์เสียง (เล็ก) อยู่ซ้าย · กล่องสคริปต์ (ใหญ่) อยู่ขวา */
.stp .sgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:stretch;margin-top:18px}
body.stproj .stp .sgrid>.nsc{margin-top:0}
body.stproj .stp .sgrid>.nsc.sleft{box-sizing:border-box;min-width:0;padding:12px 12px 14px;border-radius:12px;contain:size;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
body.stproj .stp .sgrid>.nsc.sright{flex:1 1 0;min-width:0}
body.stproj .stp .sleft .nsh{margin-bottom:8px}
body.stproj .stp .sleft .nsh b{font-size:14.5px}
.stp .sleft #nslink{flex:1 1 100%!important;font-size:12.5px;padding:7px 10px}
body.stproj[data-pg] .stp .panel .sleft button.nssec{padding:6px 10px!important;font-size:12.5px!important;min-height:0!important}
.stp .sleft #nshst{font-size:12px}
body.stproj .stp .sleft .nsplay{margin-top:10px;padding:8px 10px;border-radius:10px}
body.stproj .stp .sleft .nsplay audio{height:36px;margin-top:6px}
body.stproj .stp .sleft .nsrow{gap:8px;margin-top:10px;padding-top:10px}
body.stproj .stp .sleft .nsdur{font-size:12.5px;gap:6px}
.stp .sleft .nsdur input{width:60px!important;padding:6px 8px}
body.stproj .stp .sleft .nsrow .pri{padding:0 12px;min-height:36px;font-size:14px}
body.stproj[data-pg] .stp .panel .sleft .nsacts button{min-height:36px!important;padding:0 12px!important;font-size:14px!important}
body.stproj .stp .sleft details.nsd{margin-top:10px;padding-top:8px}
body.stproj .stp .sleft details.nsd>summary{font-size:13px}
body.stproj .stp .sleft textarea[data-f=raw]{min-height:120px;max-height:200px;overflow:auto;font-size:13px;line-height:1.6}
@media(max-width:900px){.stp .sgrid{grid-template-columns:minmax(0,1fr)}body.stproj .stp .sgrid>.nsc.sleft{contain:none;overflow:visible}}
.stp .vres{margin-top:16px;padding:14px 16px;border-radius:6px;background:#141414;border:1px solid #2a2a2a}
.stp .vres[hidden]{display:none}
.stp .vres .vrh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:14px;color:#b3b3b3}
.stp .vres audio{display:block;width:100%;height:44px;color-scheme:dark}

.stp .vpick{position:relative}
body.stproj[data-pg] .stp .panel button.vcur{width:100%;display:flex!important;align-items:center;justify-content:space-between;text-align:left;background:#141414!important;border:1px solid #2a2a2a!important;border-radius:6px!important;padding:12px 16px!important;min-height:0!important;box-shadow:none!important;transform:none!important}
body.stproj[data-pg] .stp .panel button.vcur:hover{border-color:#555!important}
.stp .vcur small{display:block;color:#8c8c8c;font-size:12px;font-weight:400}
.stp .vcur b{font-size:16px;font-weight:600}
.stp .vcur::after{content:'';border:5px solid transparent;border-top-color:#b3b3b3;margin-top:5px}
.stp .vlist{margin-top:8px;max-height:380px;overflow:auto;border:1px solid #2a2a2a;border-radius:6px;background:#141414;padding:6px}
.stp .vlist[hidden]{display:none}
.stp .vgh{padding:10px 12px 4px;font-size:13px;color:#8c8c8c}
body.stproj[data-pg] .stp .panel button.vitem{display:flex!important;width:100%;align-items:center;gap:12px;text-align:left;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:4px!important;padding:10px 12px!important;min-height:0!important;transform:none!important;font-weight:400}
body.stproj[data-pg] .stp .panel button.vitem:hover{background:#1f1f1f!important}
.stp .vck{width:16px;flex:none;color:#E50914}
.stp .vitem.on .vck::before{content:'\2713'}
.stp .vitem b{display:block;font-size:15px;color:#fff;font-weight:600}
.stp .vitem small{display:block;font-size:12.5px;color:#9a9a9a;font-weight:400}

.stp .vchips{display:flex;flex-wrap:wrap;gap:8px}
body.stproj[data-pg] .stp .panel button.vchip{background:#141414!important;color:#d0d0d0!important;border:1px solid #333!important;border-radius:999px!important;padding:7px 16px!important;min-height:0!important;font-size:14px!important;font-weight:500!important;box-shadow:none!important;transform:none!important}
body.stproj[data-pg] .stp .panel button.vchip:hover{border-color:#777!important;color:#fff!important;background:#1c1c1c!important}
body.stproj[data-pg] .stp .panel button.vchip.on{background:#fff!important;color:#111!important;border-color:#fff!important;font-weight:700!important}
