/* ============================================================
   LIQUID GLASS — ชั้นดีไซน์ (glassmorphism แนว visionOS)
   วางไว้ท้ายสุดเพื่อ override ของเดิมด้วยลำดับ cascade — ไม่แตะ logic/โครงสร้าง
   หลักการ: แก้ที่ token ก่อน แล้วค่อยเจาะเฉพาะ surface ที่ต้องเป็นกระจกจริง
   ============================================================ */
:root{
  color-scheme:light;
  /* --- โทนพื้น --- */
  --paper:#EDEEF0;                       /* เทาอ่อนนวล — ห้ามขาวล้วน กระจกต้องมีอะไรให้ทะลุ */
  --ink:#141922;
  --ink-soft:#565E6C;                    /* เข้มขึ้นจากเดิมเพื่อ contrast บนพื้นโปร่ง */
  /* --- กระจก --- */
  --glass-bg:rgba(255,255,255,.14);
  --glass-bg-strong:rgba(255,255,255,.22);   /* ปุ่ม — ทึบขึ้นนิด */
  --glass-solid:rgba(255,255,255,.78);       /* ช่องกรอก/พื้นที่ต้องอ่านชัด */
  --glass-border:rgba(255,255,255,.35);      /* เส้นแสงสะท้อนที่ขอบแก้ว */
  --glass-border-soft:rgba(255,255,255,.22);
  --glass-blur:blur(24px) saturate(180%);
  --glass-shadow:
    0 20px 40px rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.08),
    inset 0 1px 1px rgba(255,255,255,.6);
  --glass-shadow-hi:
    0 28px 56px rgba(0,0,0,.17),
    0 4px 12px rgba(0,0,0,.10),
    inset 0 1px 1px rgba(255,255,255,.75);
  /* --- active: เรืองแสงจากด้านใน ---
     ทึบ/เข้มกว่าสเปคเล็กน้อยเพื่อให้ตัวอักษรขาวผ่านเกณฑ์ contrast (ข้อบังคับ 3)
     ส่วนสี glow คงตามสเปคเป๊ะ */
  --accent:#1F5FBF;
  --accent-fill:linear-gradient(135deg,rgba(26,92,192,.96),rgba(36,106,208,.94));
  --accent-glow:0 0 32px rgba(80,150,255,.55), 0 0 80px rgba(80,150,255,.25);
  /* --- อื่น ๆ --- */
  --card:var(--glass-bg);
  --line:var(--glass-border);
  --radius:28px;
  --shadow:var(--glass-shadow);
  --ease:cubic-bezier(.4,0,.2,1);
  /* สีสถานะ: เข้มขึ้นให้ผ่าน AA 4.5:1 บนพื้นกระจก (วัดจริงแล้ว ไม่ได้กะเอา)
     ใช้เป็นทั้งตัวอักษรและพื้นปุ่ม — เข้มขึ้นทำให้ตัวอักษรขาวบนปุ่มอ่านง่ายขึ้นด้วย */
  --cyan:#00716B;                        /* 5.17:1 */
  --ok:#0B7A48;                          /* 4.75:1 */
  --amber:#8A5300;                       /* 5.57:1 */
  --pink-t:#C8143C;                      /* 5.10:1 — ใช้กับ "ข้อความเล็ก" เท่านั้น */
  /* --pink คงสีแบรนด์เดิม (#FE2C55) สำหรับโลโก้/หัวข้อใหญ่/พื้นปุ่ม — 3.24:1 ผ่านเกณฑ์ large text
     และโลโก้ได้รับการยกเว้นตาม WCAG 1.4.3 */
}
/* โหมดมืด: ตามระบบ + ปุ่ม toggle (data-theme ชนะเสมอ) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#14161A;
    --ink:#EEF1F6;
    --ink-soft:#A3ACBA;
    --glass-bg:rgba(255,255,255,.08);
    --glass-bg-strong:rgba(255,255,255,.14);
    --glass-solid:rgba(28,32,40,.82);
    --glass-border:rgba(255,255,255,.15);
    --glass-border-soft:rgba(255,255,255,.10);
    --glass-shadow:
      0 20px 40px rgba(0,0,0,.45),
      0 2px 8px rgba(0,0,0,.30),
      inset 0 1px 1px rgba(255,255,255,.14);
    --glass-shadow-hi:
      0 28px 56px rgba(0,0,0,.55),
      0 4px 12px rgba(0,0,0,.35),
      inset 0 1px 1px rgba(255,255,255,.20);
    --accent:#6FA8FF;
    --accent-fill:linear-gradient(135deg,rgba(48,124,226,.92),rgba(96,166,255,.85));
    --cyan:#2BD9CF;
    --ok:#3ED18C;
    --amber:#FFC24D;
    --pink-t:#FF6B85;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14161A;
  --ink:#EEF1F6;
  --ink-soft:#A3ACBA;
  --glass-bg:rgba(255,255,255,.08);
  --glass-bg-strong:rgba(255,255,255,.14);
  --glass-solid:rgba(28,32,40,.82);
  --glass-border:rgba(255,255,255,.15);
  --glass-border-soft:rgba(255,255,255,.10);
  --glass-shadow:
    0 20px 40px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.30),
    inset 0 1px 1px rgba(255,255,255,.14);
  --glass-shadow-hi:
    0 28px 56px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.20);
  --accent:#6FA8FF;
  --accent-fill:linear-gradient(135deg,rgba(48,124,226,.92),rgba(96,166,255,.85));
  --cyan:#2BD9CF;
  --ok:#3ED18C;
  --amber:#FFC24D;
  --pink-t:#FF6B85;
}

/* ===== ฉากหลัง: gradient จาง ๆ ให้กระจกมีอะไรให้ทะลุ =====
   ทาที่ html ด้วย เพื่อให้สีคลุมเต็มจอแม้เนื้อหาสั้นกว่า viewport */
html{
  background:var(--paper);
  background-attachment:fixed;
  background-image:
    radial-gradient(58vw 46vw at 12% -6%, rgba(94,162,255,.20), transparent 62%),
    radial-gradient(52vw 42vw at 92% 6%, rgba(254,44,85,.13), transparent 60%),
    radial-gradient(64vw 52vw at 70% 96%, rgba(0,199,190,.15), transparent 62%);
}
body{min-height:100vh;background:transparent}
:root[data-theme="dark"]{
  background-image:
    radial-gradient(58vw 46vw at 12% -6%, rgba(70,130,235,.26), transparent 62%),
    radial-gradient(52vw 42vw at 92% 6%, rgba(254,44,85,.16), transparent 60%),
    radial-gradient(64vw 52vw at 70% 96%, rgba(0,199,190,.16), transparent 62%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    background-image:
      radial-gradient(58vw 46vw at 12% -6%, rgba(70,130,235,.26), transparent 62%),
      radial-gradient(52vw 42vw at 92% 6%, rgba(254,44,85,.16), transparent 60%),
      radial-gradient(64vw 52vw at 70% 96%, rgba(0,199,190,.16), transparent 62%);
  }
}

/* ===== แผ่นแก้ว — ชั้น blur "ชั้นเดียว" ต่อ stacking context (กันเฟรมตก) ===== */
header,
.search-card,
.lv-card,
dialog,
.price-card,
.ext-note{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.search-card,dialog{border-radius:28px}
.lv-card,.price-card{border-radius:22px}
header{
  border-radius:0;border-left:0;border-right:0;border-top:0;
  box-shadow:0 8px 32px rgba(0,0,0,.10);
}
.ext-note{border-radius:18px;box-shadow:none}
/* .sec เป็นแค่ตัวเว้นระยะ — ไม่ใส่ blur เพื่อไม่ให้ซ้อนชั้นกับการ์ดข้างใน */
.sec{background:transparent}

/* ===== ปุ่มแคปซูล (liquid pill) ===== */
.btn-ext,.btn-search3,.btn-ai,.btn-add,.btn-search{
  border-radius:999px;
  min-height:56px;
  padding:0 24px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  transition:all .3s var(--ease);
}
.btn-ext:hover,.btn-search3:hover,.btn-ai:hover,.btn-add:hover,.btn-search:hover{
  transform:translateY(-2px);
  box-shadow:var(--glass-shadow-hi);
  border-color:rgba(255,255,255,.55);
  filter:none;
}
.btn-ext:active,.btn-search3:active,.btn-ai:active,.btn-add:active{transform:translateY(0)}
/* ปุ่มรอง = กระจกทึบขึ้นนิด */
.chip,.btn-ghost,.live-tab,.score-btn,.step-pill,.kw-chip,.vl-tab,.mode-tab,.cat-tab{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:999px;
  transition:all .3s var(--ease);
}
.chip:hover,.btn-ghost:hover,.live-tab:hover:not(.on),.score-btn:hover:not(.on),.kw-chip:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}
/* ปุ่มหลักที่มีสีแบรนด์อยู่แล้ว — คงสีไว้ แค่เติมมิติกระจก */
.btn-search3,.btn-search{background:linear-gradient(135deg,#FF3D63,#D91742);color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ai{background:linear-gradient(135deg,#00B3AB,#048F88)}
.btn-ai.free{background:linear-gradient(135deg,#17A868,#0C7C4A)}
.btn-add{background:linear-gradient(135deg,#00B3AB,#048F88);color:#fff}
.btn-ext{background:linear-gradient(135deg,#5B4BD6,#3E32A8);color:#fff;border:none}

/* ===== สถานะ active: เรืองแสงจากด้านใน ===== */
.live-tab.on,.score-btn.on,.mode-tab.on,.cat-tab.on,.vl-tab.on{
  background:var(--accent-fill);
  border-color:rgba(255,255,255,.55);
  color:#fff;
  box-shadow:var(--accent-glow), inset 0 1px 1px rgba(255,255,255,.45);
}
.step-pill.on{
  background:var(--accent-fill);
  border-color:rgba(255,255,255,.55);
  color:#fff;
  box-shadow:var(--accent-glow), inset 0 1px 1px rgba(255,255,255,.45);
}
.step-pill.on i{background:rgba(255,255,255,.95);border-color:transparent;color:var(--accent)}
.step-pill.done{background:var(--glass-bg-strong);border-color:rgba(255,255,255,.4);color:var(--ink)}

/* ===== ความลึก 3D — เฉพาะกลุ่มปุ่มหลัก (stepper) เท่านั้น ===== */
.stepper{
  perspective:1200px;
  transform-style:preserve-3d;
}
.stepper .step-pill{
  transform:rotateX(8deg) rotateY(-12deg) translateZ(0);
  transition:transform .45s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change:transform;
}
.stepper .step-pill:nth-of-type(1){transform:rotateX(8deg) rotateY(-12deg) translateZ(20px)}
.stepper .step-pill:nth-of-type(2){transform:rotateX(8deg) rotateY(-12deg) translateZ(8px)}
.stepper .step-pill:nth-of-type(3){transform:rotateX(8deg) rotateY(-12deg) translateZ(-8px)}
/* hover ที่กลุ่ม → คลายมุมกลับมาตรง */
.stepper:hover .step-pill,
.stepper:focus-within .step-pill{transform:rotateX(0) rotateY(0) translateZ(0)}

/* ===== ช่องกรอก/พื้นที่ต้องอ่านชัด — ทึบกว่า ไม่ใช้ blur ===== */
.search-row input,.field input,.field select,.vl-search,.vl-filter,
.ai-settings-in input,.ai-settings-in select,#freePaste,.vl-notes,
.upload-grid input,.upload-grid textarea,.f-label input,#copyModalText{
  background:var(--glass-solid);
  border:1px solid var(--glass-border);
  border-radius:14px;
  color:var(--ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.ai-settings-in,.s2-details-in{background:transparent}
.src-item{background:var(--glass-bg-strong);border:1px solid var(--glass-border);border-radius:999px;padding:7px 14px}
/* พื้นหลังย่อยที่เคยเป็นสีทึบ — ให้โปร่งเข้ากับกระจก */
.step2-preview,.ai-settings-in,.lv-empty,.step-pill i{background:var(--glass-bg-strong)}
.lv-empty{border-radius:22px;border:1px dashed var(--glass-border)}

/* ===== contrast: ข้อความเล็กสีชมพูแบรนด์อ่านไม่ออกบนกระจก → ใช้เฉดเข้ม --pink-t ===== */
.live-status.err,.ai-status.err,.live-tab:hover:not(.on),
.cl-acts .rm:hover,.vl-acts .rm:hover,.key-status:not(.set){color:var(--pink-t)}
/* กล่องสถานะที่เคยฝังสีพาสเทลไว้ตรง ๆ — ให้กลืนกับกระจกและคุม contrast ได้ */
.ext-note.ok{background:var(--glass-bg-strong);border-color:var(--glass-border);color:var(--ok)}
.key-status.set{background:transparent;color:var(--ok)}

/* ===== ปุ่มสลับธีม ===== */
.theme-toggle{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:999px;font-size:1.05rem;line-height:1;
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  color:var(--ink);box-shadow:var(--glass-shadow);
  transition:all .3s var(--ease);
}
.theme-toggle:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow-hi)}

/* ===== ข้อบังคับ 2: เบราว์เซอร์ที่ไม่รองรับ backdrop-filter → พื้นทึบ อ่านออกแน่นอน ===== */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{
    --glass-bg:#FFFFFF;
    --glass-bg-strong:#F3F5F8;
    --glass-solid:#FFFFFF;
    --glass-border:#D8DEE8;
  }
  :root[data-theme="dark"]{
    --glass-bg:#1C2027;
    --glass-bg-strong:#242932;
    --glass-solid:#1C2027;
    --glass-border:#39404C;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --glass-bg:#1C2027;
      --glass-bg-strong:#242932;
      --glass-solid:#1C2027;
      --glass-border:#39404C;
    }
  }
  header,.search-card,.lv-card,dialog,.price-card,.ext-note,
  .chip,.btn-ghost,.live-tab,.score-btn,.step-pill,.kw-chip,.src-item,.theme-toggle{
    background:var(--glass-bg);
    border-color:var(--glass-border);
  }
  .chip,.btn-ghost,.live-tab,.score-btn,.step-pill,.kw-chip,.src-item,.theme-toggle{background:var(--glass-bg-strong)}
  body{background-image:none}
}

/* ===== ข้อบังคับ 5: มือถือ — ตัด 3D ทั้งหมด + ลดชั้น blur กันเครื่องหน่วง ===== */
@media (max-width:767px){
  .stepper{perspective:none}
  .stepper .step-pill,
  .stepper .step-pill:nth-of-type(1),
  .stepper .step-pill:nth-of-type(2),
  .stepper .step-pill:nth-of-type(3){transform:none}
  .lv-card,.price-card,.ext-note{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--glass-solid);
  }
  .btn-ext,.btn-search3,.btn-ai,.btn-add,.btn-search{min-height:52px}
}

/* ===== ข้อบังคับ 4: ผู้ใช้ที่ขอลดการเคลื่อนไหว — ปิด 3D + transition ทั้งหมด ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
  .stepper{perspective:none}
  .stepper .step-pill,
  .stepper .step-pill:nth-of-type(1),
  .stepper .step-pill:nth-of-type(2),
  .stepper .step-pill:nth-of-type(3),
  .stepper:hover .step-pill{transform:none}
  .btn-ext:hover,.btn-search3:hover,.btn-ai:hover,.btn-add:hover,.btn-search:hover,
  .chip:hover,.btn-ghost:hover,.live-tab:hover:not(.on),.score-btn:hover:not(.on),
  .kw-chip:hover,.theme-toggle:hover{transform:none}
}

/* ============================================================
   หน้า channels.html — surface เดิมฝังสีพาสเทลไว้ตรง ๆ (#EDF9F2 ฯลฯ)
   ซึ่งเพี้ยนบนพื้นกระจกและอ่านไม่ออกในโหมดมืด → ดึงกลับมาใช้ token กลาง
   ============================================================ */
.ext-panel,.ch-card,.mode-card,.safety{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:22px;
  box-shadow:var(--glass-shadow);
}
.ch-card{border-left:4px solid var(--pc,var(--glass-border))}
.ext-panel.ok,.mode-card.on{border-color:rgba(62,209,140,.55);background:var(--glass-bg-strong)}
.ext-panel.off{border-color:rgba(255,194,77,.5);background:var(--glass-bg-strong)}
.mode-card.soon{border-style:dashed}
.safety{font-size:.83rem}
/* ป้าย/สถานะ: พื้นโปร่ง + ตัวอักษรใช้ token ที่ผ่าน contrast แล้ว */
.ch-tag,.ch-status,.mode-badge,.ch-btn{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  color:var(--ink-soft);
  border-radius:999px;
}
.ch-tag.video{color:var(--pink-t);border-color:var(--glass-border)}
.ch-tag.image{color:var(--cyan)}
.ch-tag.market{color:var(--amber)}
.ch-tag.login,.ch-status.need-login{color:var(--accent)}
.ch-status.ready,.mode-card.on .mode-badge,.mode-card.on .mode-state{color:var(--ok)}
.ch-status.fail{color:var(--amber)}
.ch-status.testing{color:var(--cyan)}
.ch-btn,.btn-line,.btn-dark{
  border-radius:999px;padding:8px 16px;
  transition:all .3s var(--ease);
}
.ch-btn:hover,.btn-line:hover,.btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.10)}
.ch-btn.primary,.btn-dark{background:var(--accent-fill);color:#fff;border:1px solid rgba(255,255,255,.4)}
.ch-btn.primary:hover,.btn-dark:hover{background:var(--accent-fill);color:#fff}
.btn-line{background:var(--glass-bg-strong);color:var(--ink);border:1px solid var(--glass-border)}
.switch .track{background:rgba(128,138,155,.45)}
.switch input:checked ~ .track{background:var(--accent)}
.mode-desc code,.ext-note code{background:var(--glass-bg-strong);border-radius:6px}
@media (max-width:767px){
  .ch-card,.mode-card,.safety,.ext-panel{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid);
  }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ext-panel,.ch-card,.mode-card,.safety{background:var(--glass-bg);border-color:var(--glass-border)}
  .ch-tag,.ch-status,.mode-badge,.ch-btn,.btn-line{background:var(--glass-bg-strong)}
}

/* ============================================================
   Toast + ป๊อปอัพ = การ์ดกระจก อ่านง่าย ตัวอักษรตัดกับพื้นชัดเจน
   สำเร็จ = เขียวเข้ม / ผิดพลาด = แดงเข้ม / ทั่วไป = กระจกทึบ — ทุกเคสวัด contrast แล้ว
   ============================================================ */
#toast{
  bottom:26px;
  display:flex;align-items:center;gap:11px;
  max-width:min(560px,calc(100vw - 32px));
  padding:14px 20px;
  border-radius:20px;                    /* การ์ด ไม่ใช่แคปซูล */
  text-align:left;
  font-size:.88rem;font-weight:600;line-height:1.5;
  background:var(--glass-solid);
  color:var(--ink);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
/* ไอคอนวงกลมนำหน้า — บอกชนิดได้ทันทีโดยไม่ต้องอ่านจบ */
#toast::before{
  content:'ℹ';flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.85rem;font-weight:700;
  background:rgba(120,132,150,.22);color:inherit;
}
/* สำเร็จ: การ์ดเขียวเข้ม + ตัวอักษรขาว (6.7:1) + เรืองแสงเขียวจาง ๆ */
#toast.ok{
  background:linear-gradient(135deg,rgba(9,96,58,.97),rgba(15,124,75,.95));
  color:#fff;border-color:rgba(255,255,255,.42);
  box-shadow:0 20px 40px rgba(0,0,0,.18), 0 0 34px rgba(25,190,120,.34),
             inset 0 1px 1px rgba(255,255,255,.34);
}
#toast.ok::before{content:'✓';background:rgba(255,255,255,.24);color:#fff}
/* ผิดพลาด: การ์ดแดงเข้ม + ตัวอักษรขาว (7.0:1) */
#toast.err{
  background:linear-gradient(135deg,rgba(150,16,46,.97),rgba(186,24,60,.95));
  color:#fff;border-color:rgba(255,255,255,.42);
  box-shadow:0 20px 40px rgba(0,0,0,.18), 0 0 34px rgba(240,70,110,.30),
             inset 0 1px 1px rgba(255,255,255,.34);
}
#toast.err::before{content:'!';background:rgba(255,255,255,.24);color:#fff}

/* ===== ป๊อปอัพสถานะตรวจ/ดาวน์โหลด (มุมขวาล่าง) ===== */
.download-progress-popup{
  padding:16px;border-radius:22px;
  background:var(--glass-solid);
  color:var(--ink);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
.download-progress-head b{color:var(--ink)}
.download-progress-head small,.download-progress-text{color:var(--ink-soft)}
.download-progress-close{
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  border-radius:999px;color:var(--ink);transition:all .3s var(--ease);
}
.download-progress-close:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.download-progress-track{background:rgba(120,132,150,.28);border-radius:999px}
.download-progress-track i{background:linear-gradient(90deg,var(--ok),#19B36B)}

/* ===== กล่องยืนยันสิทธิ์ก่อนดาวน์โหลด (เคยฝังสีครีมไว้ตรง ๆ) ===== */
.pv-rights{
  background:var(--glass-bg-strong);
  border:1px solid rgba(255,194,77,.55);
  border-radius:16px;
  color:var(--ink);
}
.pv-rights small{color:var(--ink-soft)}

/* ===== พรีวิวที่ฝังไม่ได้ → ข้อความอยู่บนการ์ดกระจกเข้ม อ่านออกแน่นอน ===== */
.pv-fallback .pv-fb-in{
  background:rgba(14,18,25,.72);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:22px;
  padding:22px 26px;
  box-shadow:0 20px 40px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.18);
  color:#fff;
}
.pv-fallback .pv-fb-in small{opacity:.9}
.pv-fb-btn{
  border-radius:999px;padding:11px 22px;
  background:rgba(255,255,255,.94);color:#141922;
  border:1px solid rgba(255,255,255,.5);
  transition:all .3s var(--ease);
}
.pv-fb-btn:hover{transform:translateY(-2px);background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pv-loading{background:rgba(14,18,25,.88);color:#fff}
.pv-note{color:var(--ink-soft)}

@media (max-width:767px){
  #toast,.download-progress-popup{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  #toast,.download-progress-popup{background:var(--glass-solid)}
  #toast.ok{background:#0B6A40}
  #toast.err{background:#A81434}
  .pv-fallback .pv-fb-in{background:#12161C}
}