/* ===== Profile / settings page (#/profile) — ยกเครื่องตาม demo/profile-settings.html =====
   ธีมกระจกฝ้าบนพื้นฟ้าอ่อน (theme-light) + การ์ด .card-lux เงาซ้อน + shimmer + toggle เขียวเรืองแสง */

/* --- การ์ดกระจกหรู: saturate + เงาซ้อนหลายชั้น (ตาม .card-lux ของเดโม่) --- */
.pf-lux{position:relative;border-radius:26px;
  background:var(--card-glass);border:1px solid var(--card-brd);
  backdrop-filter:blur(16px) saturate(165%);-webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:
    0 18px 44px rgba(47,139,255,.20),
    0 4px 12px rgba(9,30,60,.18),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.28)}

/* --- shimmer: แถบไฮไลต์เฉียงวิ่งผ่านการ์ดช้า ๆ (สลับจังหวะด้วย pf-sd1..3) --- */
.pf-shimmer{overflow:hidden}
.pf-shimmer::before{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:42%;
  background:linear-gradient(105deg,
    transparent 0%,rgba(255,255,255,.22) 40%,rgba(170,215,255,.30) 52%,transparent 100%);
  transform:translateX(-140%) skewX(-18deg);
  animation:pfShimmer 7.5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes pfShimmer{
  0%{transform:translateX(-140%) skewX(-18deg)}
  28%,100%{transform:translateX(340%) skewX(-18deg)}}
.pf-sd1::before{animation-delay:1.6s}
.pf-sd2::before{animation-delay:3.2s}
.pf-sd3::before{animation-delay:4.8s}

.pf-page{display:flex;flex-direction:column;gap:14px;padding:0 14px 10px;
  color:var(--lt-ink)}

/* --- แถบบนกระจกมุมโค้งใหญ่ --- */
.pf-topbar{display:flex;align-items:center;justify-content:center;padding:13px 16px;
  margin-top:calc(12px + env(safe-area-inset-top))}
.pf-topbar h1{font-size:15.5px;font-weight:700;color:var(--lt-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- การ์ดโปรไฟล์เด่น --- */
.pf-card{padding:16px}
.pf-card .pf-card-main{display:flex;align-items:center;gap:14px}
.pf-card .pf-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pf-card .pf-name{font-size:20px;font-weight:800;letter-spacing:.3px;color:var(--lt-ink)}
.pf-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:4px 12px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;
  color:#065f46;background:linear-gradient(120deg,#6ee7b7,#4ade80);
  box-shadow:0 0 14px rgba(74,222,128,.45)}
.pf-badge svg{width:13px;height:13px}
/* ปุ่มแก้ไข: ขอบเขียวเรืองแสงบาง */
.pf-edit-btn{flex:none;padding:8px 15px;border-radius:var(--r-pill);font-size:12.5px;
  font-weight:700;color:#059669;background:var(--card-glass);
  border:1px solid rgba(110,231,183,.9);box-shadow:0 0 18px rgba(74,222,128,.45);
  transition:transform .12s, background .15s;position:relative;z-index:2}
.pf-edit-btn:hover{background:rgba(236,253,245,.85)}
.pf-edit-btn:active{transform:scale(.95)}
/* --- ปุ่ม avatar + กล้องเล็กมุมขวาล่าง (อัปโหลดรูปโปรไฟล์) --- */
.pf-ava-btn{position:relative;flex:none;padding:0;border-radius:50%;cursor:pointer;
  z-index:2;transition:transform .12s}
.pf-ava-btn:active{transform:scale(.95)}
.pf-ava-btn:focus-visible{box-shadow:0 0 0 3px rgba(47,139,255,.45)}
.pf-ava-cam{position:absolute;right:-3px;bottom:-1px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#2f8bff);
  border:2px solid rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(47,139,255,.45)}
.pf-ava-cam svg{width:11px;height:11px}
/* ระหว่างอัปโหลด: จางรูป + สปินเนอร์ทับกลาง */
.pf-ava-btn.uploading{pointer-events:none}
.pf-ava-btn.uploading .avatar{opacity:.45}
.pf-ava-btn.uploading::after{content:'';position:absolute;top:50%;left:50%;
  width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2.5px solid rgba(47,139,255,.25);border-top-color:#2f8bff;
  animation:pfAvaSpin .7s linear infinite;z-index:3}
@keyframes pfAvaSpin{to{transform:rotate(360deg)}}

/* แถวสถานะ E2E เช็คเขียวใต้การ์ด */
.pf-e2e{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--card-brd);font-size:12px;font-weight:600;color:#059669}
.pf-e2e .pf-e2e-dot{width:20px;height:20px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#6ee7b7,#4ade80);
  box-shadow:0 0 14px rgba(74,222,128,.5)}
.pf-e2e .pf-e2e-dot svg{width:12px;height:12px}

/* --- quick tiles (4 ช่อง) --- */
.pf-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:15px 8px}
.pf-tiles button{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;font-weight:600;color:var(--lt-ink-dim);padding:4px 2px;
  transition:transform .12s;position:relative;z-index:2}
.pf-tiles button:active{transform:scale(.94)}
.pf-tiles .tile-ico{position:relative;width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:var(--lt-ink);
  background:var(--card-glass);border:1px solid var(--card-brd);
  box-shadow:0 4px 12px rgba(60,110,180,.12)}
.pf-tiles .tile-ico svg{width:22px;height:22px}
.pf-tiles .tile-ico.hi{color:#059669;border-color:rgba(110,231,183,.85);
  box-shadow:0 0 16px rgba(74,222,128,.4)}
.pf-tiles .tile-lv{position:absolute;top:-5px;right:-7px;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;font-size:10.5px;font-weight:800;color:#065f46;
  background:linear-gradient(90deg,#6ee7b7,#4ade80);display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 10px rgba(74,222,128,.55)}

/* --- section heading --- */
.pf-h{font-size:12.5px;font-weight:700;padding:2px 6px;margin-bottom:-6px;
  display:flex;align-items:center;gap:7px;color:var(--lt-ink-dim)}
.pf-h svg{width:14px;height:14px;color:#10b981}

/* --- กลุ่มการ์ดรายการตั้งค่า (list group) --- */
.pf-group{display:flex;flex-direction:column}
/* เส้นคั่นบางระหว่างรายการ */
.pf-line{border-top:1px solid var(--card-brd);margin:0 16px}
.pf-item,.pf-row{display:flex;align-items:center;gap:12px;padding:13px 16px;
  position:relative;z-index:2;transition:background .15s}
.pf-item:hover,.pf-row:hover{background:var(--card-glass)}
.pf-item:first-child,.pf-row:first-child{border-radius:26px 26px 0 0}
.pf-item:last-child,.pf-row:last-child{border-radius:0 0 26px 26px}
/* ไอคอนสี่เหลี่ยมมุมโค้งไล่เฉดสีประจำรายการ */
.pf-item .it-ico,.pf-row .row-ico{width:34px;height:34px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#2f8bff);
  box-shadow:0 3px 10px rgba(47,139,255,.3)}
.pf-item .it-ico svg,.pf-row .row-ico svg{width:17px;height:17px}
.pf-item .it-ico.g-green,.pf-row .row-ico.g-green{
  background:linear-gradient(135deg,#6ee7b7,#4ade80);box-shadow:0 0 14px rgba(74,222,128,.4)}
.pf-item .it-ico.g-blue,.pf-row .row-ico.g-blue{
  background:linear-gradient(135deg,#38bdf8,#2f8bff)}
.pf-item .it-ico.g-amber,.pf-row .row-ico.g-amber{
  background:linear-gradient(135deg,#fcd34d,#fb923c);box-shadow:0 3px 10px rgba(251,146,60,.35)}
.pf-item .it-ico.g-violet,.pf-row .row-ico.g-violet{
  background:linear-gradient(135deg,#a78bfa,#6366f1);box-shadow:0 3px 10px rgba(99,102,241,.35)}
.pf-item .it-ico.g-cyan,.pf-row .row-ico.g-cyan{
  background:linear-gradient(135deg,#67e8f9,#0ea5e9);box-shadow:0 3px 10px rgba(14,165,233,.35)}
.pf-item .it-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-item .it-title{font-size:13.5px;font-weight:600;color:var(--lt-ink)}
.pf-item .it-sub{font-size:11px;color:var(--lt-ink-dim);line-height:1.45}
/* ลูกศรขวา */
.pf-item .it-chev{flex:none;color:var(--lt-ink-dim);display:flex}
.pf-item .it-chev svg{width:15px;height:15px}

/* --- สวิตช์ toggle เขียวเรืองแสง เลื่อนนุ่ม --- */
.pf-switch{position:relative;width:46px;height:26px;flex:none}
.pf-switch input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:1}
.pf-switch i{position:absolute;inset:0;border-radius:13px;
  background:rgba(125,146,173,.35);border:1px solid var(--card-brd);
  transition:background .25s ease, box-shadow .25s ease}
.pf-switch i::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(9,30,60,.3);
  transition:transform .25s cubic-bezier(.4,0,.2,1)}
.pf-switch input:checked + i{background:linear-gradient(90deg,#6ee7b7,#4ade80);
  border-color:transparent;box-shadow:0 0 18px rgba(74,222,128,.45)}
.pf-switch input:checked + i::after{transform:translateX(20px)}
.pf-switch input:disabled{cursor:default}

/* --- แถบพื้นที่จัดเก็บ --- */
.pf-store{width:100%;margin-top:4px}
.pf-store .bar{display:block;height:7px;border-radius:4px;background:rgba(125,146,173,.25);
  overflow:hidden}
.pf-store .bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#6ee7b7,#4ade80,#2f8bff);
  box-shadow:0 0 8px rgba(74,222,128,.6)}
.pf-store .pct{font-size:10.5px;color:var(--lt-ink-dim);margin-top:4px;display:block}

/* --- อุปกรณ์ (แถวสร้างจาก JS: .pf-dev) --- */
.pf-devices{padding:2px 0}
.pf-dev{display:flex;align-items:center;gap:12px;padding:12px 16px;
  position:relative;z-index:2;transition:background .15s}
.pf-dev:hover{background:var(--card-glass)}
.pf-dev:first-child{border-radius:26px 26px 0 0}
.pf-dev:last-child{border-radius:0 0 26px 26px}
.pf-dev + .pf-dev{border-top:1px solid var(--card-brd)}
.pf-dev .dev-ico{width:34px;height:34px;border-radius:11px;flex:none;display:flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#2f8bff);
  box-shadow:0 3px 10px rgba(47,139,255,.3)}
.pf-dev .dev-ico svg{width:17px;height:17px}
.pf-dev .dev-name{font-size:13.5px;font-weight:600;color:var(--lt-ink);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-dev .dev-meta{font-size:11px;color:var(--lt-ink-dim);margin-top:2px}
.pf-dev .dev-this{padding:2px 9px;border-radius:var(--r-pill);font-size:10px;font-weight:700;
  color:#065f46;background:linear-gradient(120deg,#6ee7b7,#4ade80);
  box-shadow:0 0 10px rgba(74,222,128,.4)}
.pf-dev .dev-revoke{flex:none;padding:7px 13px;border-radius:var(--r-pill);font-size:12px;
  font-weight:600;color:#ef4444;border:1px solid rgba(252,165,165,.8);
  background:var(--card-glass);transition:transform .12s, background .15s}
.pf-dev .dev-revoke:hover{background:rgba(254,242,242,.8)}
.pf-dev .dev-revoke:active{transform:scale(.94)}
.pf-dev .dev-revoke[disabled]{opacity:.5;pointer-events:none}
.pf-empty{padding:16px;text-align:center;font-size:13px;color:var(--lt-ink-dim);
  position:relative;z-index:2}

/* --- settings rows --- */
.pf-set{padding:2px 0}
.pf-row{font-size:13.5px;font-weight:600;color:var(--lt-ink)}
.pf-row select{padding:8px 30px 8px 14px;border-radius:var(--r-pill);font-size:12.5px;
  background:var(--card-glass);border:1px solid var(--lt-card-brd);color:var(--lt-ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d92ad' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.pf-row select option{background:#fff;color:var(--lt-ink)}
.pf-row .row-val{font-size:12.5px;font-weight:500;color:var(--lt-ink-dim)}

/* --- push notification row --- */
.pf-push-row[hidden],.pf-line[hidden]{display:none}
.pf-push-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-push-txt small{font-size:11.5px;font-weight:500;line-height:1.35;color:var(--lt-ink-dim)}
.pf-push-test{flex:none;padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--lt-ink);
  background:var(--card-glass);border:1px solid var(--lt-card-brd);
  transition:transform .16s ease,background .16s ease}
.pf-push-test:hover{background:rgba(255,255,255,.95);transform:translateY(-1px)}
.pf-push-test:disabled{opacity:.55;cursor:default;transform:none}
.pf-push-test[hidden]{display:none}

/* --- encrypted search bar (อ่านอย่างเดียว) --- */
.pf-search{position:relative;display:flex;align-items:center}
.pf-search .sh-ico{position:absolute;left:16px;color:#10b981;pointer-events:none;
  display:flex;z-index:2}
.pf-search .sh-ico svg{width:17px;height:17px}
.pf-search input{padding-left:44px;font-size:13px;opacity:.9}
.pf-search input:disabled{cursor:default}
.pf-search .sh-glass{position:absolute;right:16px;color:var(--lt-ink-dim);display:flex;
  pointer-events:none;z-index:2}
.pf-search .sh-glass svg{width:16px;height:16px}

/* --- ปุ่มออกจากระบบ: แดงโปร่งเต็มกว้าง --- */
.pf-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px;border-radius:26px;font-size:14px;font-weight:700;color:#ef4444;
  background:rgba(254,226,226,.6);border:1px solid rgba(252,165,165,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .12s, background .15s;margin-bottom:6px}
.pf-logout svg{width:18px;height:18px}
.pf-logout:hover{background:rgba(254,226,226,.8)}
.pf-logout:active{transform:scale(.98)}

/* ===== slide-up edit panel (กระจกหนาแบบ sheet เดโม่) ===== */
.pf-sheet-bg{position:fixed;inset:0;z-index:100;background:rgba(7,20,41,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:pfFade .25s ease}
@keyframes pfFade{from{opacity:0}to{opacity:1}}
.pf-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:101;
  width:min(480px,100%);max-height:86dvh;overflow-y:auto;color:var(--lt-ink);
  background:var(--card-glass);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--card-brd);border-bottom:none;
  border-radius:26px 26px 0 0;padding:12px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 60px rgba(9,30,60,.35);
  animation:pfUp .38s cubic-bezier(.32,.72,.22,1)}
@keyframes pfUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.pf-sheet.closing{animation:pfDown .22s ease forwards}
.pf-sheet-bg.closing{animation:pfFadeOut .22s ease forwards}
@keyframes pfDown{to{transform:translate(-50%,100%)}}
@keyframes pfFadeOut{to{opacity:0}}
.pf-sheet .grab{width:40px;height:6px;border-radius:3px;background:rgba(125,146,173,.3);
  margin:0 auto 14px}
.pf-sheet h3{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--lt-ink)}
.pf-sheet label.fld{display:block;font-size:12.5px;font-weight:600;
  color:var(--lt-ink-dim);margin-bottom:14px}
.pf-sheet label.fld .input-glass{margin-top:7px;font-weight:400}
.pf-sheet .input-glass{background:var(--card-glass);border-color:var(--lt-card-brd);
  color:var(--lt-ink)}
.pf-sheet .input-glass::placeholder{color:var(--lt-ink-dim)}
.pf-sheet textarea.input-glass{border-radius:var(--r-md);resize:none;min-height:76px;
  line-height:1.5}
.pf-presence{display:flex;gap:8px;margin:7px 0 18px}
.pf-presence button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 6px;border-radius:16px;font-size:13px;font-weight:600;color:var(--lt-ink-dim);
  background:var(--card-glass);border:1px solid var(--card-brd);transition:all .2s}
.pf-presence button i{width:9px;height:9px;border-radius:50%;flex:none}
.pf-presence button[data-p=online] i{background:#22c55e}
.pf-presence button[data-p=away] i{background:#f59e0b}
.pf-presence button[data-p=busy] i{background:#ef4444}
/* ตัวเลือก active: ขอบเขียวเรืองแสง (แบบ .choice-on ของเดโม่) */
.pf-presence button.active{color:#065f46;border-color:rgba(74,222,128,.85);
  background:rgba(236,253,245,.8);box-shadow:0 0 14px rgba(74,222,128,.3)}
.pf-sheet .btn-cta[disabled]{opacity:.6;pointer-events:none}
.pf-sheet .sheet-cancel{display:block;width:100%;text-align:center;padding:13px;
  margin-top:10px;font-size:14px;color:var(--lt-ink-dim)}

/* จอแคบ 360px: บีบระยะไม่ให้ล้น */
@media (max-width:379px){
  .pf-page{padding:0 10px 10px}
  .pf-tiles{padding:13px 2px;gap:2px}
  .pf-tiles button{font-size:10px}
  .pf-card .pf-name{font-size:18px}
  .pf-edit-btn{padding:7px 11px;font-size:11.5px}
  .pf-item,.pf-row,.pf-dev{padding:12px 13px}
  .pf-line{margin:0 13px}
}

/* ===== FIX-TEAM-D: พื้นที่จัดเก็บจริง / sheet ช่วยเหลือ / ซิงค์ / ระดับบัญชี ===== */
button.pf-item{width:100%;text-align:left;cursor:pointer}
button.pf-item:active{background:var(--card-glass)}
.pf-item-col{align-items:flex-start}
.pf-store-break{display:block;margin-top:3px;font-size:10.5px;line-height:1.6;
  color:var(--lt-ink-dim);opacity:.85}
.pf-store-acts{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.pf-mini-btn{padding:7px 13px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;
  color:#1d4ed8;background:rgba(219,234,254,.75);border:1px solid rgba(147,197,253,.75);
  transition:transform .12s,background .15s}
.pf-mini-btn:hover{background:rgba(191,219,254,.9)}
.pf-mini-btn:active{transform:scale(.95)}
.pf-mini-btn[disabled]{opacity:.55;pointer-events:none}
.pf-mini-btn.danger{color:#b91c1c;background:rgba(254,226,226,.75);
  border-color:rgba(252,165,165,.8)}
.pf-mini-btn.danger:hover{background:rgba(254,202,202,.9)}

.pf-sheet-desc{font-size:12.5px;line-height:1.7;color:var(--lt-ink-dim);margin:-8px 0 16px}
.pf-danger-cta{background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff}

/* FAQ */
.pf-faq{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pf-faq-item{border-radius:16px;background:var(--card-glass);
  border:1px solid var(--lt-card-brd);overflow:hidden}
.pf-faq-item summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px 14px;font-size:13px;font-weight:600;color:var(--lt-ink);line-height:1.5}
.pf-faq-item summary::-webkit-details-marker{display:none}
.pf-faq-chev{margin-left:auto;flex:none;display:flex;color:var(--lt-ink-dim);
  transition:transform .2s}
.pf-faq-chev svg{width:15px;height:15px}
.pf-faq-item[open] .pf-faq-chev{transform:rotate(90deg)}
.pf-faq-item p{padding:0 14px 13px;font-size:12.5px;line-height:1.75;color:var(--lt-ink-dim)}
.pf-faq-more{padding-top:0;opacity:.85}
.pf-help-mail{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:16px;font-size:12.5px;font-weight:600;color:#1d4ed8;
  background:rgba(219,234,254,.7);border:1px solid rgba(147,197,253,.7);
  text-decoration:none;overflow-wrap:anywhere;text-align:center}
.pf-help-mail svg{width:15px;height:15px;flex:none}

/* sheet ซิงค์อุปกรณ์ */
.pf-sync-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.pf-sync-list .pf-dev{border-radius:16px;background:var(--card-glass);
  border:1px solid var(--lt-card-brd)}

/* sheet ระดับบัญชี */
.pf-lv-hero{display:flex;align-items:center;gap:15px;margin-bottom:12px}
.pf-lv-ring{position:relative;width:66px;height:66px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#fbbf24,#f97316);
  box-shadow:0 6px 20px rgba(249,115,22,.4)}
.pf-lv-ring svg{width:24px;height:24px;opacity:.55}
.pf-lv-ring b{position:absolute;font-size:22px;font-weight:800;line-height:1}
.pf-lv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-lv-pts{font-size:20px;font-weight:800;color:var(--lt-ink)}
.pf-lv-pts small{font-size:11.5px;font-weight:600;color:var(--lt-ink-dim)}
.pf-lv-next{font-size:12px;color:var(--lt-ink-dim)}
.pf-lv-streak{font-size:11.5px;font-weight:600;color:#059669}
.pf-lv-bar{height:8px;border-radius:5px;background:rgba(125,146,173,.25);overflow:hidden;
  margin-bottom:16px}
.pf-lv-bar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#fbbf24,#f97316);transition:width .5s ease}
.pf-lv-h{font-size:13px;font-weight:700;color:var(--lt-ink);margin-bottom:9px}
.pf-lv-perks{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.pf-lv-perks li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-radius:14px;font-size:12.5px;line-height:1.5;
  background:var(--card-glass);border:1px solid var(--lt-card-brd);color:var(--lt-ink)}
.pf-lv-perks li.off{opacity:.6}
.pf-lv-perks li small{display:block;margin-top:2px;font-size:10.5px;color:var(--lt-ink-dim)}
.pf-lv-ck{flex:none;display:flex;margin-top:1px}
.pf-lv-ck svg{width:15px;height:15px}
.pf-lv-perks li.on .pf-lv-ck{color:#16a34a}
.pf-lv-perks li.off .pf-lv-ck{color:var(--lt-ink-dim)}

/* ====== v3.2: ธีมสีสด → แผ่นไอคอนเป็นกระจกใสสีเดียวกันหมด (ลดความลายตา) ====== */
html[data-wtheme="night"] .pf-item .it-ico, html[data-wtheme="night"] .pf-row .row-ico,
html[data-wtheme="power"] .pf-item .it-ico, html[data-wtheme="power"] .pf-row .row-ico,
html[data-wtheme="duo"] .pf-item .it-ico, html[data-wtheme="duo"] .pf-row .row-ico{
  background:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22) !important;
  color:#fff}
/* ข้อความในการ์ดตั้งค่าตามโทเคนธีม */
html[data-wtheme] .pf-item .it-title,
html[data-wtheme] .pf-sec-h,
html[data-wtheme] .pf-row > .grow{color:var(--card-ink)}
html[data-wtheme] .pf-item .it-sub,
html[data-wtheme] .pf-row .row-val{color:var(--card-ink-dim)}
/* ธีมสีสด: ปุ่มแก้ไขโปรไฟล์ + บรรทัด E2E ให้อ่านออก (เดิมเป็นเขียวเข้มบนพื้นสด) */
html[data-wtheme="night"] .pf-edit-btn, html[data-wtheme="power"] .pf-edit-btn,
html[data-wtheme="duo"] .pf-edit-btn{
  color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
html[data-wtheme="night"] .pf-e2e, html[data-wtheme="power"] .pf-e2e,
html[data-wtheme="duo"] .pf-e2e{color:#8affc4}