/* =========================================================
   account-v2.css (v10) — แผน "บัญชีของฉัน" บนมือถือ: Compact Luxury Profile
   โหลดท้ายสุดใน index.html ด้วย media="(max-width: 767px)"
   โครงสร้าง: index.html (.cred-card > .acct-row, .wallet-total > .wallet-rows .ws)
   ลบไฟล์นี้ + บรรทัด <link> = กลับไปหน้าตาเดิมจาก history-vault.css รอบ 9
   ซ่อมด่วน: ระยะ/ขนาด → ตัวแปร --av2-* · สี → --a-amber/--a-green ด้านล่าง
   ========================================================= */
#authLoggedIn{
  --av2-gap:14px; --av2-radius:16px; --av2-row:56px; --av2-pad:16px;
  --a-amber:#9fa3a8; --a-green:#35DDB4; --a-blue:#70B8FF;
  --av2-gold:#9fa3a8; --av2-sub:#999DA7; --av2-surface:#16181C; --av2-line:#292C34;
}
body[data-sheet="hist"] .cred-card{display:none}

/* ---- หัวแผน (โหมดบัญชี): ไอคอน + ชื่อหน้า + ACCOUNT OVERVIEW + ปุ่มปิด ---- */
body[data-sheet="acct"] #authCard .sheet-head{padding-top:10px;padding-bottom:12px}
body[data-sheet="acct"] #authCard .sheet-head h2{
  display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;
  font-size:1.2rem;line-height:1.25;
}
body[data-sheet="acct"] #authCard .sheet-head h2::before{
  content:"";grid-row:1 / span 2;width:44px;height:44px;margin:0;border-radius:13px;
  background:#1C1E23 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAC65D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center/22px no-repeat;
}
body[data-sheet="acct"] #authCard .sheet-head h2::after{
  content:"ACCOUNT OVERVIEW";font-family:system-ui,-apple-system,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.12em;color:var(--av2-sub);
}

/* ---- การ์ดเดียว: ใช้พื้นที่น้อยลง ---- */
.cred-head{display:none}
#authLoggedIn .cred-card{margin:0 0 var(--av2-gap);padding:14px;border-radius:20px;background:var(--av2-surface);border:1px solid var(--av2-line)}

/* ---- บัญชีที่เข้าสู่ระบบ (แถวเดียว ไม่ซ้อนกรอบ) ---- */
#authLoggedIn .cred-card .acct-row{
  margin:0 0 12px;padding:2px 2px 0;border:0;border-radius:0;background:none;
  animation:vcIn .3s ease both;
}
#authLoggedIn .cred-card .acct-avatar{width:48px;height:48px;border-color:var(--av2-gold)}
body.auth-open #authLoggedIn .cred-card .acct-avatar{animation:vcGlow 1.3s ease .35s 1 both}
@keyframes vcGlow{0%{box-shadow:0 0 0 0 rgba(159,163,168,0)}35%{box-shadow:0 0 0 5px rgba(159,163,168,.28),0 0 18px rgba(159,163,168,.35)}100%{box-shadow:0 0 0 0 rgba(159,163,168,0)}}
#authLoggedIn .cred-card .acct-info{animation:vcFade .3s ease .15s both}
#authLoggedIn .cred-card .acct-label{font-size:.78rem;font-weight:400;color:var(--av2-sub)}
#authLoggedIn .cred-card .acct-mail{margin-top:1px;font-size:1rem;font-weight:600;color:#F4F4F5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#authLoggedIn .cred-card .acct-info::after{content:"✓ เข้าสู่ระบบแล้ว";display:block;margin-top:2px;font-size:.78rem;font-weight:500;color:var(--a-green)}
#authLoggedIn .cred-card .acct-check{display:none}
@keyframes vcFade{from{opacity:0}to{opacity:1}}

/* ---- เครดิตคงเหลือ ---- */
#authLoggedIn .cred-card .wallet-total{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;margin:0;padding:16px 14px 14px;
  border:1px solid rgba(159,163,168,.18);border-radius:18px;
  background:linear-gradient(160deg,#0e0f10 0%,#090C10 60%);
  box-shadow:inset 0 0 44px rgba(159,163,168,.07);
  animation:vcIn .3s ease .08s both;
}
#authLoggedIn .cred-card .wallet-total>*{position:relative;z-index:1}
#authLoggedIn .cred-card .wallet-total>.wt-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* พื้นหลังเคลื่อนไหว "Liquid Gold Flow": แสงทองไหลช้า ๆ + เส้นแสงโค้ง (ใช้ transform อย่างเดียว เล่นเฉพาะตอนแผนเปิด) */
#authLoggedIn .cred-card .wallet-total::before{
  content:"";display:block;position:absolute;z-index:0;inset:-40%;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 32%,rgba(159,163,168,.20) 44%,rgba(159,163,168,.07) 54%,transparent 68%),
    radial-gradient(36% 32% at 24% 30%,rgba(159,163,168,.22),transparent 70%),
    radial-gradient(30% 28% at 80% 74%,rgba(159,163,168,.12),transparent 70%);
  will-change:transform;
}
#authLoggedIn .cred-card .wallet-total::after{
  content:"";display:block;position:absolute;z-index:0;top:0;bottom:0;left:0;width:200%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none' fill='none' stroke='%23EAC65D' stroke-linecap='round'%3E%3Cpath d='M0 78C75 28 225 128 300 78' stroke-width='1.2' stroke-opacity='.38'/%3E%3Cpath d='M0 92C75 42 225 142 300 92' stroke-width='.8' stroke-opacity='.22'/%3E%3Cpath d='M0 64C75 14 225 114 300 64' stroke-width='.8' stroke-opacity='.18'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;
  will-change:transform;
}
body.auth-open #authLoggedIn .cred-card .wallet-total::before{animation:vcFlow 16s ease-in-out infinite alternate}
body.auth-open #authLoggedIn .cred-card .wt-fx::before{animation:vcWaveR 17s linear infinite}
body.auth-open #authLoggedIn .cred-card .wt-fx::after{animation:vcPulse 7s ease-in-out infinite}
body.auth-open #authLoggedIn .cred-card .wallet-total::after{animation:vcWave 24s linear infinite}
#authLoggedIn .cred-card .wt-fx::before{
  content:"";display:block;position:absolute;top:0;bottom:0;left:0;width:200%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none' fill='none' stroke='%23EAC65D' stroke-linecap='round'%3E%3Cpath d='M0 40C75 90 225 -10 300 40' stroke-width='1' stroke-opacity='.26'/%3E%3Cpath d='M0 54C75 104 225 4 300 54' stroke-width='.7' stroke-opacity='.16'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;
  will-change:transform;
}
#authLoggedIn .cred-card .wt-fx::after{
  content:"";display:block;position:absolute;top:-30px;right:-30px;width:170px;height:120px;
  background:radial-gradient(closest-side,rgba(53,221,180,.20),transparent 75%);
}
@keyframes vcFlow{0%{transform:translate3d(-8%,-6%,0) scale(.95)}100%{transform:translate3d(8%,6%,0) scale(1.15)}}
@keyframes vcWaveR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes vcPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes vcWave{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
#authLoggedIn .cred-card .wallet-total-label{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--av2-sub)}
#authLoggedIn .cred-card .wallet-total-num{display:flex;align-items:baseline;gap:8px;margin:2px 0 0}
#authLoggedIn .cred-card .wallet-total-num b{font-size:3rem;line-height:1;font-weight:700;color:#F4F4F5;font-variant-numeric:tabular-nums}
#authLoggedIn .cred-card .wallet-total-num small{font-size:.95rem;color:var(--av2-sub)}
/* เส้นทองประดับ (ไม่ใช่แถบสัดส่วน: ระบบยังไม่มียอดเครดิตทั้งหมดที่เคยได้รับ) */
#authLoggedIn .cred-card .cred-line{display:block;height:3px;margin:12px 0 14px;border-radius:2px;background:linear-gradient(90deg,var(--av2-gold),rgba(159,163,168,.5));transform-origin:left;animation:vcLine .5s ease .2s both}
@keyframes vcLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- เครดิตตรวจ / เครดิตเสียง: แถบสรุปแนวนอนกะทัดรัด (กรอบเดียว สองช่อง เส้นแบ่งบาง) ---- */
#authLoggedIn .cred-card .wallet-rows{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 14px;padding:0;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--av2-radius);background:rgba(6,8,11,.5);overflow:hidden;
  animation:none;
}
#authLoggedIn .cred-card .ws{
  display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;align-items:center;
  min-height:0;padding:10px 14px 11px;margin:0;border-radius:0;background:none;text-align:left;animation:none;
}
#authLoggedIn .cred-card .ws+.ws{border-left:1px solid var(--av2-line)}
#authLoggedIn .cred-card .ws{position:relative;overflow:hidden}
#authLoggedIn .cred-card .ws-check{color:var(--a-blue);background:linear-gradient(150deg,rgba(112,184,255,.14),rgba(112,184,255,.04));box-shadow:inset 0 0 0 1px rgba(112,184,255,.20)}
#authLoggedIn .cred-card .ws-voice{color:var(--a-green);background:linear-gradient(150deg,rgba(53,221,180,.14),rgba(53,221,180,.04));box-shadow:inset 0 0 0 1px rgba(53,221,180,.20)}
#authLoggedIn .cred-card .ws::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translate3d(-130%,0,0) skewX(-18deg);
}
body.auth-open #authLoggedIn .cred-card .ws-check::after{animation:vcCorner 9s ease-in-out 2s infinite}
body.auth-open #authLoggedIn .cred-card .ws-voice::after{animation:vcCorner 9s ease-in-out 3.2s infinite}
@keyframes vcCorner{0%{transform:translate3d(-130%,0,0) skewX(-18deg)}14%,100%{transform:translate3d(330%,0,0) skewX(-18deg)}}
#authLoggedIn .cred-card .wallet-total.has-credit .wallet-total-label::after{box-shadow:0 0 20px rgba(53,221,180,.30)}
#authLoggedIn .cred-card .ws-ico{grid-column:1;grid-row:1;display:grid;place-items:center;width:24px;height:24px}
#authLoggedIn .cred-card .ws-ico svg{width:20px;height:20px}
#authLoggedIn .cred-card .ws-lab{grid-column:2;grid-row:1;margin:0;font-size:.82rem;font-weight:500;line-height:1.2;white-space:nowrap;color:inherit}
#authLoggedIn .cred-card .ws-num{grid-column:1 / -1;grid-row:2;margin:0;line-height:1.1}
#authLoggedIn .cred-card .ws-num b{font-size:1.75rem;font-weight:700;color:#F4F4F5;font-variant-numeric:tabular-nums}

/* ---- ปุ่มเติมเครดิต: เรียบ มีแสงทองผ่านครั้งเดียวตอนเปิดแผน ---- */
#authLoggedIn .cred-card .wallet-quick{margin:0}
#authLoggedIn .cred-card .wallet-total .wallet-topup{
  min-height:56px;border-radius:15px;color:#0f1011;font-weight:700;
  background-color:var(--av2-gold);
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  background-size:250% 100%;background-position:150% 0;background-repeat:no-repeat;
  transition:transform .18s ease,opacity .18s ease;
}
body.auth-open #authLoggedIn .cred-card .wallet-total .wallet-topup{animation:vcSheen 8s ease-in-out .8s infinite}
@keyframes vcSheen{0%{background-position:150% 0}14%,100%{background-position:-50% 0}}
#authLoggedIn .cred-card .wallet-total .wallet-topup:active{transform:scale(.98);opacity:.94}

/* ---- การตั้งค่า / ออกจากระบบ ---- */
#authLoggedIn .acct-menu{margin-top:0;border-radius:var(--av2-radius);overflow:hidden;background:var(--av2-surface);border-color:var(--av2-line);animation:vcIn .3s ease .26s both}
#authLoggedIn .acct-menu::before{padding:14px 16px 6px}
#authLoggedIn .menu-item{min-height:var(--av2-row);padding:10px 16px;gap:14px;border-left:0;border-right:0;border-color:var(--av2-line);transition:transform .18s ease,background-color .18s ease}
#authLoggedIn .menu-ico{flex:0 0 44px;width:44px;height:44px;border-radius:13px}
#authLoggedIn .menu-txt small{white-space:normal;line-height:1.4}
#authLoggedIn .menu-item:active{background:rgba(255,255,255,.04)}
#authLoggedIn .acct-out{margin-top:var(--av2-gap);min-height:var(--av2-row);background:rgba(201,110,100,.07);border:1px solid rgba(201,110,100,.22);color:#E0948A;animation:vcIn .3s ease .32s both}

@media (prefers-reduced-motion:reduce){
  body.auth-open #authLoggedIn .cred-card .wallet-total::before,body.auth-open #authLoggedIn .cred-card .wallet-total::after,body.auth-open #authLoggedIn .cred-card .wt-fx::before,body.auth-open #authLoggedIn .cred-card .wt-fx::after,body.auth-open #authLoggedIn .cred-card .ws::after{animation:none}
  #authLoggedIn .cred-card .acct-row,#authLoggedIn .cred-card .acct-info,#authLoggedIn .cred-card .wallet-total,#authLoggedIn .cred-card .wallet-rows,
  #authLoggedIn .cred-card .cred-line,#authLoggedIn .acct-menu,#authLoggedIn .acct-out{animation:none}
  body.auth-open #authLoggedIn .cred-card .acct-avatar,body.auth-open #authLoggedIn .cred-card .wallet-total .wallet-topup{animation:none}
  #authLoggedIn .cred-card .wallet-total .wallet-topup,#authLoggedIn .menu-item{transition:none}
}

/* =========================================================
   แก้บั๊ก (26 ต.ค. 2026)
   1) แถบค้นหา/ตัวกรองหน้าประวัติโปร่งใสตรงขอบล่าง ทำให้หัวกลุ่มวันที่ทับปุ่มตัวกรอง → ใส่พื้นทึบสีเดียวกับแผน
   2) เส้นทองบนแถบเมนูล่างเยื้องซ้าย เพราะ history-vault.css (left/right 28%) ชนกับ mobile-polish.css (margin-left -14px) → จัดกึ่งกลางใหม่
   3) ปุ่ม "ประเด็นควรทบทวน" ลอยทับรายการและมองเห็นข้อความทะลุ → พื้นทึบ
   ========================================================= */
.hist-tools{background:var(--card,#17181c);padding-bottom:10px;margin-bottom:12px}
.hist-tools::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;background:linear-gradient(var(--card,#17181c),rgba(23,24,28,0))}
.bottom-nav .bn-item.is-on::before,.bottom-nav .bn-item::before{left:50%;right:auto;width:32px;margin-left:-16px}
#authCard .lib-review{background:#111821;box-shadow:0 -10px 18px rgba(8,9,11,.85),0 6px 16px rgba(0,0,0,.5)}