/* ===== CSS เดิม + เพิ่มเลย์เอาต์หมวดหมู่ ===== */
:root {
    --ff: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", Arial, sans-serif;
    --bg: #0f172a;
    --bg-grad: radial-gradient(1000px 380px at 15% -10%, #2b6cb0 0%, transparent 60%), radial-gradient(900px 320px at 100% -20%, #805ad5 0%, transparent 55%);
    --text: #e5e7eb;
    --muted: #94a3b8;
    --card: #0b1220cc;
    --card-b: rgba(255, 255, 255, .08);
    --field: #0b1220;
    --field-b: rgba(255, 255, 255, .12);
    --r: 12px;
    --shadow: 0 8px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
    --ctl-h: 36px;
    --bar-h: 8px;
    --knob: 18px;
    --accent: #0ea5b8
}


html[data-theme=light] {
    --bg: #f6f7fb;
    --bg-grad: radial-gradient(1000px 380px at 15% -10%, #e3eeff 0%, transparent 60%), radial-gradient(900px 320px at 100% -20%, #eee5ff 0%, transparent 55%);
    --text: #0f172a;
    --muted: #475569;
    --card: #fff;
    --card-b: rgba(15, 23, 42, .08);
    --field: #fff;
    --field-b: rgba(15, 23, 42, .15);
    --shadow: 0 6px 18px rgba(0, 0, 0, .08);
    --accent: #0284c7
}

* {
    box-sizing: border-box
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--ff) !important
}

.bi {
    vertical-align: -.125em
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    touch-action: pan-y;
    overscroll-behavior-x: none
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg-grad), var(--bg);
    background-attachment: fixed
}

/* รูป lazy: fade-in นุ่ม ๆ ตอนโหลดเสร็จ (ทุกหน้า) */
img[loading="lazy"] { opacity: 0; transition: opacity .4s ease; }
img[loading="lazy"].img-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce){ img[loading="lazy"]{ opacity: 1; transition: none; } }


/* Sticky Appbar */
/* default (โทน dark) — กันค่า undefined บนหน้าที่ไม่ตั้ง data-theme + ให้ gradient ลอดผ่านทุกหน้าเหมือน blacklist */
:root                     { --appbar-bg: rgba(11,18,32,.55); }
:root[data-theme="dark"]  { --appbar-bg: rgba(11,18,32,.55); }
:root[data-theme="light"] { --appbar-bg: rgba(255,255,255,.80); }
:root{ --border: rgba(148,163,184,.18); }
html[data-theme="light"]{ --border: rgba(15,23,42,.12); }

.appbar{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 2147482000;              /* ต่ำกว่า modal */
  background: var(--appbar-bg);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 6px;
}

/* เงาบาง ๆ ตอนมีการเลื่อน (ไม่เปลี่ยนความสูงบาร์) */
body.scrolled .appbar{
  box-shadow: 0 1px 0 var(--border), 0 10px 24px rgba(0,0,0,.08);
  border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
}

/* ที่ว่างแทนตำแหน่ง appbar ตอนถูกยกขึ้น fixed */
#appbar-spacer { height: 0; }

.appbar.is-fixed{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: var(--appbar-left, 0px);
  width: var(--appbar-width, 100vw);
  z-index: 2147482000;
  background: var(--appbar-bg);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 10px 24px rgba(0,0,0,.08);
}


.container {
    margin: 0 auto;
    padding: 12px
}

.appbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap
}

.appbar .title {
    white-space: nowrap;
    margin: 0;
}

/* ===== Brand Title ===== */
.title {
  display: inline-flex;      /* อยู่แถวเดียวใน appbar */
  align-items: center;
  gap: 8px;
  white-space: nowrap;       /* กันตัดบรรทัด */
}

.title .brand-logo {
  height: 52px;              /* ปรับขนาดโลโก้ที่นี่ */
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.title .brand {
  font-weight: 800;
}

.title .sep { opacity: .8; }

/* โลโก้บนจอเล็ก — ใหญ่ เด่น และ "ทะลุ" ลงมาใต้บาร์เล็กน้อย (ดูพรีเมียม) */
@media (max-width:640px) {
  #appbar { overflow: visible; gap: 4px; }      /* ไม่ clip โลโก้ที่ล้นลงมา + ชิดขึ้น */
  .appbar .title { margin-left: -2px; }          /* ดันโลโก้ชิดขอบ/แฮมเบอร์เกอร์ */
  .title .brand-logo {
    height: 46px;                                /* ใหญ่ขึ้น เห็นชัด */
    margin-bottom: -12px;                        /* ทะลุลงมาใต้บาร์ ~12px */
    position: relative; z-index: 1;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  }
}


.meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden
}

.sp {
    flex: 1 1 auto
}

.meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto
}

@media (max-width:640px) {
    .appbar .title {
        display: inline-flex;   /* คงโลโก้บนมือถือ (เดิมซ่อนทั้งก้อน = โลโก้หาย) */
    }
    .title .brand {
        display: none;          /* ซ่อนเฉพาะข้อความ TCGCardPrice กันเบียด — โลโก้ยังอยู่ */
    }

    .meta-left {
        flex: 1
    }
}

.badge {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--card-b);
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap
}

/* ===== Appbar user info ===== */
.ab-credits {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(245,158,11,.10); color: #f59e0b;
    border: 1px solid rgba(245,158,11,.22);
    font-size: 12px; font-weight: 700; text-decoration: none;
    white-space: nowrap; transition: background .15s;
}
.ab-credits:hover { background: rgba(245,158,11,.2) }
.ab-credits .bi { font-size: 12px }

.ab-user {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    font-size: 12px; font-weight: 600; text-decoration: none;
    color: var(--text); white-space: nowrap; transition: border-color .15s;
}
.ab-user:hover { border-color: var(--accent); background: rgba(255,255,255,.11) }
html[data-theme=light] .ab-user { background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14) }
.ab-role {
    font-size: 9px; font-weight: 800; padding: 1px 5px;
    border-radius: 20px; letter-spacing: .03em; flex-shrink: 0;
}
.ab-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis }
@media(max-width:520px) {
    .ab-credits { padding: 3px 7px }
    .ab-name { display: none }
}

.icon-btn {
    all: unset;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--field);
    border: 1px solid var(--card-b);
    cursor: pointer
}

.icon-btn .bi {
    font-size: 18px
}

.lg-only {
    display: none
}

@media (min-width:900px) {
    .lg-only {
        display: grid
    }
}

.toggle {
    position: relative;
    width: 44px;
    height: 22px
}

.toggle input {
    position: absolute;
    inset: 0;
    opacity: 0
}

.toggle .track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .12);
    border: 1px solid var(--card-b);
    border-radius: 999px
}

.toggle .knob {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: 3px;
    top: 2px;
    background: linear-gradient(#e5e7eb, #cbd5e1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 #fff;
    transition: left .18s, background .18s
}

.toggle input:checked + .track {
    background: var(--accent);
    border-color: transparent
}

.toggle input:checked + .track + .knob {
    left: 23px;
    background: #fff
}

/* === Controls: เพิ่ม dropdown หมวด (cat) + จัด grid areas เพื่อจัดเรียงบนจอเล็ก === */
.controls {
    margin-top: 10px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(140px, 200px) 1fr minmax(160px, 240px);
    grid-template-areas: "cat q sort";
}

#cat {
    grid-area: cat
}

.q-wrap {
    grid-area: q;
    position: relative;
    display: flex;
    align-items: center;
}

.q-wrap #q {
    flex: 1;
    padding-right: 40px
}

.q-cam {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

.q-cam:hover {
    color: var(--accent);
    background: rgba(14, 165, 184, .1)
}

#sort {
    grid-area: sort
}

@media (max-width:680px) {
    .controls {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "cat sort" "q q";
    }
}

.control,
.select2-container--default .select2-selection--single {
    height: var(--ctl-h);
    border-radius: 12px !important;
    border: 1px solid var(--field-b);
    background: var(--field);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.control {
    width: 100%;
    padding: 0 12px;
    outline: none
}

.control::placeholder {
    color: var(--muted)
}

/* iOS/Android: กันเบราว์เซอร์ซูมอัตโนมัติตอนแตะ input (เกิดเมื่อ font-size < 16px) → responsive ไม่พัง
   ตั้ง 16px เฉพาะจอเล็ก ไม่ปิด pinch-zoom (คง initial-scale=1 ไว้) */
@media (max-width: 768px) {
    .control,
    input[type="search"],
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    textarea,
    .select2-container--default .select2-selection--single,
    .select2-search__field {
        font-size: 16px !important;
    }
}

.select2-container,
.select2-container *,
.select2-dropdown,
.select2-results__options,
.select2-results__option,
.select2-search__field {
    font-family: var(--ff) !important;
    font-size: 14px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--ctl-h) - 2px) !important;
    color: var(--text) !important;
    padding-left: 10px !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ctl-h) - 2px) !important
}

.select2-dropdown {
    background: var(--field) !important;
    color: var(--text) !important;
    border: 1px solid var(--field-b) !important
}

.select2-results__option--highlighted {
    background: rgba(96, 165, 250, .2) !important;
    color: var(--text) !important
}

.summary {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap
}

.summary .right {
    margin-left: auto;
    white-space: nowrap
}

#chips {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    overflow: auto;
    padding-bottom: 2px
}

.chip {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 999px;
    background: rgba(96, 165, 250, .18);
    border: 1px solid rgba(96, 165, 250, .35)
}

.chip button {
    all: unset;
    margin-left: 4px;
    cursor: pointer;
    opacity: .85
}

.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, .5);
    backdrop-filter: blur(2px);
    display: none;
    z-index: 60
}

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform .25s;
    z-index: 61
}

.sheet .inner {
    margin: 0 auto;
    width: min(720px, 96vw);
    background: var(--field);
    border: 1px solid var(--field-b);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: var(--shadow);
    padding: 10px
}

.sheet .bar {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    margin: 6px auto 10px
}

.sheet.show {
    transform: none
}

.sheet.show+.sheet-backdrop {
    display: block
}

@media (min-width:900px) {
    .sheet .inner {
        width: min(900px, 90vw)
    }
}

.sheet-grid {
    display: grid;
    gap: 8px
}

.sheet-row {
    display: grid;
    gap: 8px
}

.noUi-target {
    height: var(--bar-h);
    padding: 0 calc(var(--knob)/2);
    border-radius: 999px;
    box-sizing: content-box
}

.noUi-horizontal {
    height: var(--bar-h)
}

.noUi-connects {
    border-radius: 999px;
    overflow: hidden
}

.noUi-horizontal .noUi-handle {
    width: var(--knob);
    height: var(--knob);
    right: calc(var(--knob)/-2);
    top: calc((var(--bar-h)-var(--knob))/2);
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(#e5e7eb, #cbd5e1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 #fff
}

.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
    display: none
}

.sheet-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 2px
}

.btn {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--field-b);
    background: var(--field);
    color: var(--text);
    cursor: pointer
}

.btn.primary {
    background: linear-gradient(90deg, #ffdf06, #ffa400);
    border: none;
    color: #0b1020
}

/* ซ่อนจากสายTA แต่ screen reader / Google ยังอ่านได้ (SEO H1 ฯลฯ) */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grid {
    margin-top: 8px;
    display: grid;
    gap: 10px;
    /* auto-fill (ไม่ใช่ auto-fit): ผลลัพธ์น้อย (เช่นค้นเจอ 1 ใบ) การ์ดคงขนาดปกติ ไม่ยืดเต็มจอ */
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr))
}

@media (min-width:560px) {
    .grid {
        /* card min-width สเกลตามความกว้างจอ → คอลัมน์พอดีทุกขนาดจอ ไม่แน่น/ไม่เล็กเกิน */
        grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 12vw, 240px), 1fr))
    }
}

.card {
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--card-b);
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: translateY(6px);
    opacity: 0;
    transition: transform .3s, opacity .28s;
    cursor: pointer;
    content-visibility: auto;        /* perf: ข้าม render การ์ดนอกจอจนกว่าจะเลื่อนถึง */
    contain-intrinsic-size: 0 380px; /* ความสูงโดยประมาณ กัน scroll กระโดด */
}

.card.show {
    transform: none;
    opacity: 1
}

.cardwrap {
    position: relative
}

.rank {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    color: #111827;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center
}

.imgbox {
    aspect-ratio: 4/5;
    background: #0a0f1a;
    overflow: hidden;
    position: relative
}

html[data-theme=light] .imgbox {
    background: #eef2ff
}

.imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(1.03);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none
}


/* ===== 50/50 single row, all screens ===== */
.card .price-row{
  position:absolute;          /* แถบราคาลอยใกล้ขอบล่างรูป (มี gap) */
  left:6px; right:6px; bottom:6px;
  display:grid;
  grid-template-columns: 1fr 1fr;   /* 50% / 50% */
  gap:5px;
  align-items:stretch;
  z-index:2;
}
.price-badge,
.number-price,                 /* เผื่อคุณใช้คลาสเดิม */
.usd-price{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important; /* จัดข้อความกลางกล่อง */
  padding:.36rem .4rem !important;
  border-radius:8px !important;
  line-height:1 !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;     /* ห้ามขึ้นบรรทัดใหม่ */
  overflow:hidden !important;        /* กันล้น (เดี๋ยว JS ช่วยหดฟอนต์ให้พอดี) */
  min-width:0;                       /* สำคัญมากใน grid/flex */
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.5) !important;
}

/* ฿ = สีอิงราคาขึ้น/ลง (เขียวขึ้น · แดงลง · teal เริ่มต้น) · $ ดำทึบ ตัวขาว */
.price-badge.thb,
.number-price{ background:#0ea5b8 !important; color:#04240f !important; text-shadow:none !important; }
.price-badge.thb.pb-up   { background:#16c75e !important; color:#04240f !important; }
.price-badge.thb.pb-down { background:#ef4444 !important; color:#fff !important; }
.price-badge.thb.pb-flat { background:#0ea5b8 !important; color:#04222a !important; }
.price-badge.usd,
.usd-price   { background:#0b1220 !important; color:#fff !important; }

/* ขนาดพื้นฐาน + ย่อบนจอเล็ก */
.price-badge,
.number-price,
.usd-price{ font-size:13.5px; }
@media (max-width:420px){
  .price-badge,
  .number-price,
  .usd-price{ font-size:12px; }
}

/* ===== มือถือ: การ์ด 3 คอลัมน์ (จอจิ๋วหล่นเป็น 2 อัตโนมัติ ไม่ล้น) + ย่อทุกอย่างให้สมดุล ===== */
@media (max-width:520px){
  .grid{ gap:7px; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)) !important; }
  .card{ border-radius:11px; contain-intrinsic-size:0 240px; }
  .content{ padding:3px 6px 7px; gap:1px; }
  .cardname{ font-size:11px; line-height:1.25; }
  .card-meta{ gap:3px 4px; }
  .cm-code{ font-size:9px; } .cm-rar,.cm-var,.cm-grade,.cm-raw,.cm-lang{ font-size:8px; padding:0 3px; }
  .card .price-row{ left:4px; right:4px; bottom:4px; gap:3px; }
  .price-badge,.number-price,.usd-price{ font-size:10px; padding:.26rem .25rem !important; border-radius:6px !important; }
  .rank{ font-size:9px; padding:1px 5px; top:5px; left:5px; }
  .trend-pill{ font-size:8.5px !important; font-weight:500 !important; padding:0 !important; gap:2px !important; margin:1px 0 !important; background:transparent !important; }
  .trend-pill i{ font-size:7px; }
  .badge{ font-size:10.5px; padding:3px 7px; }
  .sparkline,.sparkline svg{ height:36px; }
}



.content {
    padding: 4px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.t1 {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
}

.attrs {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    height: calc(1.35em * 5);
    overflow: hidden
}

@keyframes shimmer {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 200% 50%
    }
}

.rar-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    backdrop-filter: blur(2px)
}

.holo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: screen
}
/* perf: หยุด shimmer ของการ์ดในกริดตอนไม่ hover (กัน 25 อนิเมชันวิ่งพร้อมกันทำให้กระตุก) */
.card .holo { animation-play-state: paused; }
.card:hover .holo { animation-play-state: running; }
@media (prefers-reduced-motion: reduce){ .holo { animation: none !important; } }

.rar-SEC .rar-badge {
    background: linear-gradient(135deg, #ffe66d, #ff8bd7, #7ad7ff, #ffe66d);
    color: #111;
    background-size: 250% 250%;
    animation: shimmer 6s linear infinite
}

.rar-SEC .holo {
    opacity: .38;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .25) 12%, rgba(255, 255, 255, .0) 24%), repeating-linear-gradient(60deg, rgba(255, 0, 102, .18) 0 10px, rgba(0, 125, 255, .18) 10px 20px, rgba(255, 255, 0, .18) 20px 30px);
    background-size: 220% 220%, 300% 300%;
    animation: shimmer 8s linear infinite
}

.rar-SEC.card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 0 30px rgba(255, 215, 0, .28), 0 10px 24px rgba(0, 0, 0, .35)
}

.rar-SR .rar-badge {
    background: linear-gradient(135deg, #ffd1dc, #ffe29a);
    color: #111;
    background-size: 200% 200%;
    animation: shimmer 7s linear infinite
}

.rar-SR .holo {
    opacity: .26;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .18) 14%, rgba(255, 255, 255, .0) 28%), repeating-linear-gradient(45deg, rgba(255, 192, 203, .12) 0 12px, rgba(255, 235, 130, .12) 12px 24px);
    background-size: 200% 200%, 260% 260%;
    animation: shimmer 9s linear infinite
}

.rar-SR.card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 26px rgba(255, 214, 165, .22), 0 10px 24px rgba(0, 0, 0, .35)
}

.rar-R .rar-badge {
    background: linear-gradient(135deg, #8bdcff, #baffc9);
    color: #0b1020
}

.rar-R .holo {
    opacity: .16;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .12) 18%, rgba(255, 255, 255, .0) 36%);
    animation: shimmer 10s linear infinite;
    background-size: 200% 200%
}

.rar-R.card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 0 20px rgba(138, 235, 200, .16), 0 10px 24px rgba(0, 0, 0, .35)
}

.rar-UC .rar-badge {
    background: linear-gradient(135deg, #c7b6ff, #e8d3ff);
    color: #0b1020
}

.rar-UC.card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 0 14px rgba(186, 170, 255, .14), 0 10px 24px rgba(0, 0, 0, .35)
}

.rar-C .rar-badge {
    background: rgba(255, 255, 255, .22);
    color: #111
}

.rar-C.card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 24px rgba(0, 0, 0, .35)
}

.rar-L .rar-badge {
    background: linear-gradient(135deg, #ffb199, #ff0844);
    color: #111
}

.rar-L.card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 24px rgba(255, 120, 120, .22), 0 10px 24px rgba(0, 0, 0, .35)
}

.rar-SP .rar-badge {
    background: linear-gradient(135deg, #84fab0, #8fd3f4);
    color: #111
}

.rar-P .rar-badge {
    background: linear-gradient(135deg, #ffd86f, #fc6262);
    color: #111
}

.rar-PARA .rar-badge {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    color: #111
}

.rar-line span {
    font-weight: 800
}

.rar-line.rar-SEC span {
    background: linear-gradient(90deg, #ffe66d, #ff8bd7, #7ad7ff, #ffe66d);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    color: transparent;
    animation: shimmer 5s linear infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, .15)
}

.rar-line.rar-SR span {
    background: linear-gradient(90deg, #ffd1dc, #ffe29a);
    -webkit-background-clip: text;
    color: transparent
}

.rar-line.rar-R span {
    background: linear-gradient(90deg, #8bdcff, #baffc9);
    -webkit-background-clip: text;
    color: transparent
}

.rar-line.rar-L span {
    background: linear-gradient(90deg, #ffb199, #ff0844);
    -webkit-background-clip: text;
    color: transparent
}

.rar-line.rar-UC span {
    color: #c9b8ff
}

.rar-line.rar-C span {
    color: #e5e7eb
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 20px;
    z-index: 70;
    background: rgba(6, 10, 20, .75);
    backdrop-filter: blur(6px)
}

.modal.show {
    display: grid
}

.panel {
    width: min(1100px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: var(--field);
    border: 1px solid var(--field-b);
    border-radius: 16px;
    box-shadow: var(--shadow);
    position: relative
}

.modal header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-b);
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent), var(--field);
    backdrop-filter: saturate(120%) blur(4px);
    z-index: 2
}

.modal header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    background: none !important;
    -webkit-background-clip: initial !important;
    color: #000 !important
}

.modal header .hdr-right {
    display: flex;
    align-items: center;
    gap: 8px
}

.rar-badge.small {
    position: static;
    transform: none;
    padding: 3px 7px;
    font-size: 11px
}

.modal header .x {
    all: unset;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    border-radius: 10px;
    padding: 4px;
    transition: transform .15s, background .15s
}

.modal header .x:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, .06)
}

.panel-body {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 16px;
    padding: 14px
}

@media (max-width:980px) {
    .panel-body {
        grid-template-columns: 1fr
    }
}

.bigimg {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-b)
}

.bigimg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0a0f1a
}

html[data-theme=light] .bigimg img {
    background: #eef2ff
}

.kv {
    font-size: 14px
}

.kv div {
    padding: 6px 0;
    border-bottom: 1px dashed var(--card-b)
}

#modal .panel {
    scrollbar-width: thin;
    scrollbar-color: #000 #000
}

#modal .panel::-webkit-scrollbar {
    width: 12px;
    height: 12px
}

#modal .panel::-webkit-scrollbar-track {
    background: #000
}

#modal .panel::-webkit-scrollbar-thumb {
    background: #111;
    border-radius: 10px;
    border: 2px solid #000
}
/* ── Portfolio ── */
.portfolio-table { width:100%; border-collapse:collapse; font-size:13px }
.portfolio-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.5 }
.portfolio-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle }
.portfolio-table tr:last-child td { border-bottom:none }
.pnl-pos { color:#16a34a; font-weight:700 }
.pnl-neg { color:#dc2626; font-weight:700 }
.plan-bar { display:flex; align-items:center; gap:10px; font-size:12px; margin-bottom:16px }
.plan-bar-track { flex:1; height:6px; background:var(--border); border-radius:3px }
.plan-bar-fill { height:6px; border-radius:3px; background:var(--accent); transition:width .3s }
.thumb-sm { width:36px; height:50px; object-fit:cover; border-radius:5px }
.badge-plan { font-size:10px; font-weight:700; border-radius:20px; padding:2px 8px; background:rgba(14,165,184,.15); color:var(--accent) }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:10px 0 }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px }
.stat-card .stat-label { font-size:10px; opacity:.5; text-transform:uppercase; letter-spacing:.05em }
.stat-card .stat-val { font-size:20px; font-weight:800; color:var(--accent); margin-top:2px }

/* ── Shop / Sponsored ── */
.sponsored-section { margin:12px 0; padding:12px; background:var(--card); border:1px solid rgba(245,158,11,.3); border-radius:12px }
.sponsored-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#d97706; margin-bottom:8px }
.sponsored-card { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--field); border-radius:8px; margin-bottom:6px; text-decoration:none; color:inherit }
.sponsored-card:last-child { margin-bottom:0 }
.sponsored-shop-name { font-size:13px; font-weight:600 }
.sponsored-title { font-size:12px; opacity:.6 }
.shop-inventory-section { margin:20px 0 }
.shop-inv-table { width:100%; border-collapse:collapse; font-size:13px }
.shop-inv-table th { padding:7px 10px; text-align:left; font-size:11px; text-transform:uppercase; opacity:.5; border-bottom:1px solid var(--border) }
.shop-inv-table td { padding:8px 10px; border-bottom:1px solid var(--border) }
.condition-badge { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; background:rgba(14,165,184,.12); color:var(--accent) }

/* ===== Footer (ใช้ร่วมทุกหน้า — partials/footer.php) ===== */
.site-foot{margin-top:12px;position:relative}
.site-foot::before{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,var(--accent,#ef4444) 30%,rgba(239,68,68,.4) 70%,transparent)}
.foot-inner{padding:40px 20px 0}
.foot-grid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:32px 24px}
@media(max-width:768px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px 16px}}
@media(max-width:480px){
  .foot-inner{padding:26px 16px 0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  .foot-brand{grid-column:1/-1;text-align:center;display:flex;flex-direction:column;align-items:center}
  .foot-logo{margin-bottom:8px}
  .foot-logo-img{height:50px}
  .foot-tagline{margin:0 0 10px;font-size:12px}
  .foot-col-title{margin-bottom:8px}
  .foot-col-links{gap:8px}
  .foot-col-links a{font-size:12.5px}
  .foot-bottom{margin-top:22px;flex-direction:column;text-align:center;gap:8px}
  .foot-legal{justify-content:center}
}
.foot-logo{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:14px}
.foot-logo-img{height:72px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));transition:transform .2s}
.foot-logo:hover .foot-logo-img{transform:scale(1.05)}
.foot-tagline{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0 0 16px}
.foot-ebay-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 10px;font-size:11px;color:var(--muted)}
html[data-theme=light] .foot-ebay-badge{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.foot-ebay-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 6px #22c55e}
.foot-col-title{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.foot-col-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot-col-links a{font-size:13px;font-weight:200;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:7px;transition:color .15s}
.foot-col-links a:hover{color:var(--accent,#ef4444)}
.foot-col-links a i{font-size:12px;width:16px;text-align:center;flex-shrink:0}
.foot-bottom{margin-top:32px;padding:14px 20px;border-top:1px solid var(--card-b,rgba(255,255,255,.07));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-copy{font-size:11.5px;color:var(--muted)}
.foot-copy a{color:var(--muted);text-decoration:none}
.foot-copy a:hover{color:var(--accent)}
.foot-legal{display:flex;gap:16px}
.foot-legal a{font-size:11.5px;color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--accent)}

/* ===== Affiliate CTA (cardlist/deck) — เช็คราคา & หาซื้อ eBay ===== */
.aff-cta{margin-top:16px;padding:15px 16px;border-radius:14px;border:1px solid var(--border);
    background:linear-gradient(180deg,color-mix(in srgb,var(--aff,#0ea5b8) 9%,transparent),transparent 70%),var(--card);}
.aff-cta-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.aff-cta-head>i{font-size:21px;color:var(--aff,#0ea5b8);flex-shrink:0}
.aff-cta-t{font-size:14.5px;font-weight:800;color:var(--text);line-height:1.2}
.aff-cta-s{font-size:12px;color:var(--muted);margin-top:2px}
.aff-cta-s b{color:var(--text);font-weight:700}
.aff-cta-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
    padding:11px 16px;border-radius:11px;background:var(--text);color:var(--bg,#0b0f14);
    font-size:14px;font-weight:800;text-decoration:none;transition:.14s;border:1px solid transparent}
.aff-cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--aff,#0ea5b8) 70%,transparent);filter:brightness(1.04)}
.aff-cta-logo{height:19px;width:auto;display:block}
.aff-cta-btn .bi-box-arrow-up-right{font-size:12px;opacity:.6}
.aff-cta-btns{display:flex;gap:8px;flex-wrap:wrap}
.aff-cta-btns .aff-cta-btn{flex:1 1 60%}
.aff-cta-btn2{flex:1 1 130px;display:flex;align-items:center;justify-content:center;gap:7px;
    padding:11px 14px;border-radius:11px;background:var(--field);color:var(--text);border:1px solid var(--border);
    font-size:13px;font-weight:700;text-decoration:none;transition:.14s}
.aff-cta-btn2:hover{border-color:var(--aff,#0ea5b8);color:var(--aff,#0ea5b8);transform:translateY(-1px)}
.aff-cta-logo2{height:16px;width:auto;display:block}
.aff-cta-btn2 .bi-box-arrow-up-right{opacity:.55}
.aff-cta-note{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10.5px;color:var(--muted);line-height:1.4}
.aff-cta-note i{font-size:11px;flex-shrink:0}
.aff-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:13px;padding-bottom:13px;border-bottom:1px dashed var(--border)}
.aff-price-thb{font-size:26px;font-weight:900;color:var(--aff,#0ea5b8);line-height:1;letter-spacing:-.01em}
.aff-price-meta{font-size:11.5px;color:var(--muted)}
.aff-price-meta i{font-size:11px}
.aff-mini--price{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
/* กล่องมูลค่าเด็ค + ราคาต่อใบ */
.dk-val{display:flex;align-items:center;gap:14px;margin:4px 0 20px;padding:14px 18px;border-radius:14px;border:1px solid var(--border);
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%),var(--card)}
.dk-val-ic{font-size:25px;color:var(--accent);flex-shrink:0}
.dk-val-amt{font-size:25px;font-weight:900;color:var(--text);line-height:1.05;letter-spacing:-.01em}
.dk-val-amt small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0}
.dk-val-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.dk-val-sub b{color:var(--text)}
.dk-cardprice{position:absolute;top:6px;right:6px;background:rgba(14,165,184,.93);color:#fff;font-size:10.5px;
    font-weight:800;padding:2px 7px;border-radius:7px;z-index:2;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}
/* เวอร์ชันเล็ก (ในลิสต์การ์ดของเด็ค) */
.aff-mini{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:8px;
    border:1px solid var(--border);background:var(--field);color:var(--muted);
    font-size:11.5px;font-weight:700;text-decoration:none;transition:.12s;white-space:nowrap}
.aff-mini:hover{border-color:var(--accent);color:var(--accent)}
.aff-mini i{font-size:11px}

/* ── Profile avatar + กรอบ cosmetic (gamification เฟส C) ── lib/points.php::points_avatar_html ── */
.pf-av{--pf-s:40px;--pf-ring:2.5px;position:relative;display:inline-block;width:var(--pf-s);height:var(--pf-s);
    border-radius:50%;flex-shrink:0;line-height:0;padding:var(--pf-ring);box-sizing:border-box;background:transparent;vertical-align:middle}
.pf-av .pf-inner{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;background:var(--card)}
.pf-av .pf-inner img{width:100%;height:100%;object-fit:cover;display:block}
.pf-av .pf-ini{font-weight:800;color:#fff;font-size:calc(var(--pf-s)*.44);line-height:1;font-family:inherit;letter-spacing:.01em}
.pf-av .pf-badge{position:absolute;right:-3px;bottom:-4px;z-index:3;line-height:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.pf-av .pf-inner{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28)}
/* วงแหวนหมุน (holographic) — ::before อยู่หลัง inner ทุกกรอบยกเว้น none/rookie */
.pf-av[class*="pf-frame-"]:not(.pf-frame-none):not(.pf-frame-rookie)::before{
    content:"";position:absolute;inset:0;z-index:0;border-radius:50%;animation:pfSpin 6s linear infinite}
/* กรอบ — ปลดตามเลเวล (ยิ่งสูง ยิ่งอลังการ) */
.pf-frame-none{padding:0}
/* rookie — เหล็กขัดเงา (เรียบแต่มีมิติ) */
.pf-frame-rookie{background:linear-gradient(135deg,#cbd5e1,#475569 45%,#94a3b8 75%,#334155)}
/* hunter — มิ้นต์ วงแหวนหมุน + เรืองแสงนุ่ม */
.pf-frame-hunter{box-shadow:0 0 9px rgba(20,184,166,.45)}
.pf-frame-hunter::before{background:conic-gradient(from 0deg,#0ea5b8,#5eead4,#2dd4bf,#0d9488,#2dd4bf,#5eead4,#0ea5b8)}
/* appraise — น้ำเงิน หมุนไว + เรืองแสง */
.pf-frame-appraise{box-shadow:0 0 12px rgba(59,130,246,.5)}
.pf-frame-appraise::before{background:conic-gradient(from 0deg,#2563eb,#93c5fd,#3b82f6,#1d4ed8,#60a5fa,#93c5fd,#2563eb);animation-duration:5s}
/* sage — ม่วง holographic + glow เต้น + ประกายดาวโคจร (เบา) */
.pf-frame-sage{--pf-ring:3px;animation:pfGlowP 2.6s ease-in-out infinite}
.pf-frame-sage::before{background:conic-gradient(from 0deg,#7c3aed,#d8b4fe,#a855f7,#6d28d9,#e879f9,#c084fc,#7c3aed);animation-duration:4.5s}
.pf-frame-sage::after{content:"";position:absolute;inset:-3px;z-index:4;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(circle 1.6px at 50% 1%,#f5d0fe 96%,transparent),
      radial-gradient(circle 1.4px at 93% 62%,#fff 96%,transparent),
      radial-gradient(circle 1.4px at 9% 40%,#e9d5ff 96%,transparent);
    animation:pfSpin 11s linear infinite,pfTwinkle 2s ease-in-out infinite}
/* legend — ทอง holographic รุ้ง + glow แรงเต้น + ดาวระยิบโคจรรอบวง (อลังการสุด) */
.pf-frame-legend{--pf-ring:3.5px;animation:pfGlowG 2.2s ease-in-out infinite}
.pf-frame-legend::before{background:conic-gradient(from 0deg,#f59e0b,#fde047,#fb923c,#fff,#fef08a,#fbbf24,#f59e0b);animation-duration:3.2s}
.pf-frame-legend::after{content:"";position:absolute;inset:-4px;z-index:4;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(circle 2.2px at 50% 0%,#fff 96%,transparent),
      radial-gradient(circle 1.6px at 86% 16%,#fde68a 96%,transparent),
      radial-gradient(circle 2px at 98% 60%,#fff 96%,transparent),
      radial-gradient(circle 1.6px at 70% 96%,#fef08a 96%,transparent),
      radial-gradient(circle 2px at 16% 86%,#fff 96%,transparent),
      radial-gradient(circle 1.6px at 2% 34%,#fde68a 96%,transparent);
    animation:pfSpin 8s linear infinite,pfTwinkle 1.5s ease-in-out infinite}
/* กรอบ milestone เชิญเพื่อน (ปลดจากจำนวนเชิญ) */
.pf-frame-host{box-shadow:0 0 10px rgba(16,185,129,.5)}
.pf-frame-host::before{background:conic-gradient(from 0deg,#059669,#6ee7b7,#10b981,#047857,#34d399,#6ee7b7,#059669)}
.pf-frame-ambassador{--pf-ring:3px;animation:pfGlowAmb 2.6s ease-in-out infinite}
.pf-frame-ambassador::before{background:conic-gradient(from 0deg,#db2777,#f0abfc,#a855f7,#c026d3,#f472b6,#e879f9,#db2777);animation-duration:4s}
.pf-frame-patron{--pf-ring:3.5px;animation:pfGlowG 2.2s ease-in-out infinite}
.pf-frame-patron::before{background:conic-gradient(from 0deg,#f59e0b,#fde047,#fb7185,#a855f7,#38bdf8,#fde047,#f59e0b);animation-duration:3s}
.pf-frame-patron::after{content:"";position:absolute;inset:-4px;z-index:4;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(circle 2px at 50% 0%,#fff 96%,transparent),
      radial-gradient(circle 1.6px at 90% 24%,#fde68a 96%,transparent),
      radial-gradient(circle 2px at 78% 94%,#fff 96%,transparent),
      radial-gradient(circle 1.6px at 10% 78%,#f0abfc 96%,transparent),
      radial-gradient(circle 1.6px at 4% 30%,#fff 96%,transparent);
    animation:pfSpin 8s linear infinite,pfTwinkle 1.6s ease-in-out infinite}
@keyframes pfGlowAmb{0%,100%{box-shadow:0 0 9px rgba(219,39,119,.4)}50%{box-shadow:0 0 20px rgba(219,39,119,.8)}}
@keyframes pfSpin{to{transform:rotate(360deg)}}
@keyframes pfTwinkle{0%,100%{opacity:.35;filter:drop-shadow(0 0 1px #fff)}50%{opacity:1;filter:drop-shadow(0 0 3px #fff)}}
@keyframes pfGlowP{0%,100%{box-shadow:0 0 9px rgba(168,85,247,.45)}50%{box-shadow:0 0 22px rgba(168,85,247,.85)}}
@keyframes pfGlowG{0%,100%{box-shadow:0 0 12px rgba(245,158,11,.55),0 0 0 1px rgba(245,158,11,.5)}50%{box-shadow:0 0 30px rgba(245,158,11,1),0 0 4px rgba(253,224,71,.9),0 0 0 1px rgba(253,224,71,.85)}}

/* ── กรอบกลุ่มตลาด (buyer/seller/reviewer/contrib · 3 ระดับ ทองแดง→เงิน→ทอง/พิเศษ) ── */
/* นักช็อป — ฟ้าน้ำเงิน (ช็อปปิ้ง) */
.pf-frame-buyer1::before{background:conic-gradient(from 0deg,#0e7490,#67e8f9,#22d3ee,#155e75,#67e8f9,#0e7490)}
.pf-frame-buyer2{box-shadow:0 0 9px rgba(34,211,238,.45)}
.pf-frame-buyer2::before{background:conic-gradient(from 0deg,#0891b2,#cffafe,#22d3ee,#0e7490,#a5f3fc,#0891b2);animation-duration:5s}
.pf-frame-buyer3{--pf-ring:3px;box-shadow:0 0 13px rgba(34,211,238,.6)}
.pf-frame-buyer3::before{background:conic-gradient(from 0deg,#06b6d4,#fff,#67e8f9,#0891b2,#a5f3fc,#67e8f9,#06b6d4);animation-duration:4s}
/* นักขาย — เขียว (เงินทอง) */
.pf-frame-seller1::before{background:conic-gradient(from 0deg,#15803d,#86efac,#22c55e,#166534,#86efac,#15803d)}
.pf-frame-seller2{box-shadow:0 0 9px rgba(34,197,94,.45)}
.pf-frame-seller2::before{background:conic-gradient(from 0deg,#16a34a,#dcfce7,#4ade80,#15803d,#bbf7d0,#16a34a);animation-duration:5s}
.pf-frame-seller3{--pf-ring:3px;box-shadow:0 0 13px rgba(34,197,94,.6)}
.pf-frame-seller3::before{background:conic-gradient(from 0deg,#22c55e,#fde047,#86efac,#16a34a,#fef08a,#4ade80,#22c55e);animation-duration:3.6s}
/* นักรีวิว — เหลืองทอง (ดาว) */
.pf-frame-rev1::before{background:conic-gradient(from 0deg,#b45309,#fcd34d,#f59e0b,#92400e,#fcd34d,#b45309)}
.pf-frame-rev2{box-shadow:0 0 9px rgba(245,158,11,.45)}
.pf-frame-rev2::before{background:conic-gradient(from 0deg,#d97706,#fef3c7,#fbbf24,#b45309,#fde68a,#d97706);animation-duration:5s}
.pf-frame-rev3{--pf-ring:3px;box-shadow:0 0 13px rgba(245,158,11,.6)}
.pf-frame-rev3::before{background:conic-gradient(from 0deg,#f59e0b,#fff,#fcd34d,#b45309,#fde68a,#fbbf24,#f59e0b);animation-duration:3.6s}
/* ขาประจำ — ม่วง (รวมพลัง) */
.pf-frame-contrib1::before{background:conic-gradient(from 0deg,#6d28d9,#c4b5fd,#a855f7,#5b21b6,#c4b5fd,#6d28d9)}
.pf-frame-contrib2{box-shadow:0 0 9px rgba(168,85,247,.45)}
.pf-frame-contrib2::before{background:conic-gradient(from 0deg,#7c3aed,#ede9fe,#a855f7,#6d28d9,#ddd6fe,#7c3aed);animation-duration:5s}
.pf-frame-contrib3{--pf-ring:3px;box-shadow:0 0 14px rgba(168,85,247,.65)}
.pf-frame-contrib3::before{background:conic-gradient(from 0deg,#a855f7,#38bdf8,#f472b6,#7c3aed,#fde047,#a855f7);animation-duration:3.2s}

@media (prefers-reduced-motion:reduce){.pf-av::before,.pf-av::after{animation:none!important}.pf-frame-sage,.pf-frame-legend{animation:none!important}}
/* เลขรหัสสมาชิก (collector no.) — สไตล์การ์ดสะสม */
.pf-memno{display:inline-flex;align-items:center;gap:5px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text);
    background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(14,165,184,.1));
    border:1px solid var(--card-b);border-radius:7px;padding:3px 10px}
.pf-memno i{font-size:11px;opacity:.75;color:var(--accent)}

/* การ์ดเลือกกรอบ (หน้า account/cosmetics.php) */
.cos-wrap{max-width:760px;margin:0 auto;padding:26px 16px 70px}
.cos-h1{font-size:23px;font-weight:800;color:var(--text);margin:0 0 4px;display:flex;align-items:center;gap:9px}
.cos-sub{font-size:13px;color:var(--muted);margin:0 0 22px}
.cos-me{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--card-b);border-radius:16px;padding:18px 20px;margin-bottom:24px}
.cos-me .info .nm{font-size:16px;font-weight:800;color:var(--text)}
.cos-me .info .lv{font-size:12.5px;font-weight:700;margin-top:3px}
.cos-me .info .hint{font-size:11px;color:var(--muted);margin-top:5px}
.cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cos-card{position:relative;background:var(--card);border:1.5px solid var(--card-b);border-radius:15px;padding:18px 12px 14px;text-align:center;transition:.14s}
.cos-card.on{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.cos-card.locked{opacity:.62}
.cos-card .nm{font-size:12.5px;font-weight:700;color:var(--text);margin-top:13px;min-height:18px}
.cos-card .st{font-size:10.5px;font-weight:700;margin-top:7px;min-height:15px}
.cos-card .btn{margin-top:10px;width:100%;padding:8px;border-radius:9px;border:none;background:#22c55e;color:#fff;
    font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:.12s}
.cos-card .btn:hover{background:#16a34a}
.cos-card .btn[disabled]{background:var(--field);color:var(--muted);cursor:default}
.cos-card.on .btn{background:var(--field);color:#22c55e;cursor:default}
.cos-lock{font-size:11px;color:var(--muted);font-weight:700;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px}