/* @rts Factory — ธีมมืด (ค่าเริ่มต้น) และธีมสว่าง [data-theme=light] ให้ผลงานเป็นพระเอก (เลย์เอาต์อ้างอิง ArtStation)
   สีทั้งหมดอยู่ในตัวแปรด้านล่าง ห้ามใส่สีตรง ๆ ในคอมโพเนนต์ ยกเว้นสีที่ตั้งใจให้เหมือนกันทั้งสองธีม (เช่น ป้ายบนภาพ กระดาษตั๋ว) */
:root {
  --bg: #0b0b0d;
  --bg-2: #131316;
  --bg-3: #1b1b20;
  --bg-4: #26262d;
  --line: #2a2a31;
  --line-2: #3b3b44;
  --text: #f3f3f5;
  --text-2: #b6b6c0;
  --text-3: #85858f;
  --blue: #2db3f5;
  --blue-2: #5cc6fa;
  --blue-ink: #03263a;
  --blue-soft: rgba(45, 179, 245, .09);
  --green: #3ccf91;
  --red: #ff5f6d;
  --pop: var(--bg-3);              /* เมนูลอย / ป๊อปอัป */
  --bar: rgba(11, 11, 13, .92);    /* แถบหัวหน้าแบบโปร่ง */
  --line-strong: #8b8b95;          /* ขอบช่องค้นหา */
  --btn-gray: #3a3a41;
  --btn-gray-h: #47474f;
  --viewer: #060607;               /* พื้นหลังหน้าดูผลงาน */
  --text-body: #dcdce2;            /* เนื้อหาบล็อก */
  --inv-bg: #fff;                  /* แถบลอยสีตรงข้าม (แท็บล่าง ปุ่มกลม toast) */
  --inv-text: #1a1a1a;
  --inv-hover: #ececec;
  --inv-on: #111;
  --inv-on-text: #fff;
  --amber: #f4b740;
  --amber-text: #f6cb72;
  --danger-text: #ff9aa3;
  --purple: #b9a3f0;
  --orange: #ff8a6b;
  --map-bg: #17202a;
  --map-grid: rgba(255, 255, 255, .05);
  --shadow: rgba(0, 0, 0, .55);
  --font: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
  /* ขอบปลอดภัยของ iPhone (รอยบาก/แถบโฮม) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

:root[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-2: #ffffff;
  --bg-3: #eeeef2;
  --bg-4: #e2e2e8;
  --line: #e0e0e6;
  --line-2: #cbcbd4;
  --text: #17171b;
  --text-2: #484853;
  --text-3: #6f6f7b;
  --blue: #0284c7;
  --blue-2: #0369a1;
  --blue-ink: #ffffff;
  --blue-soft: rgba(2, 132, 199, .08);
  --green: #0f8a5a;
  --red: #dc3545;
  --pop: #ffffff;
  --bar: rgba(245, 245, 247, .92);
  --line-strong: #9a9aa6;
  --btn-gray: #e6e6ec;
  --btn-gray-h: #d9d9e1;
  --viewer: #e8e8ed;
  --text-body: #26262d;
  --inv-bg: #17171b;
  --inv-text: #e8e8ee;
  --inv-hover: #2c2c33;
  --inv-on: #ffffff;
  --inv-on-text: #111;
  --amber: #a86a00;
  --amber-text: #855400;
  --danger-text: #b42334;
  --purple: #6a4fc4;
  --orange: #c2410c;
  --map-bg: #dce6ef;
  --map-grid: rgba(0, 0, 0, .06);
  --shadow: rgba(20, 20, 30, .18);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
img[data-art]:not([src]) { visibility: hidden; } /* ซ่อนข้อความ alt ระหว่างรอสร้างภาพ */
svg { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { line-height: 1.3; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.green { color: var(--green); }
.mt { margin-top: 16px; }
.mt-sm { margin-top: 8px; }
.link { color: var(--blue); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------- ปุ่ม ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 6px; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background .15s, transform .1s, border-color .15s; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-gray { background: var(--btn-gray); color: var(--text); }
.btn-gray:hover { background: var(--btn-gray-h); }
.btn-blue { background: var(--blue); color: var(--blue-ink); }
.btn-blue:hover { background: var(--blue-2); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-lg { height: 48px; padding: 0 22px; border-radius: 8px; font-size: 15.5px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-blue.on, .btn.on { background: var(--bg-4); color: var(--text); }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--text-2); flex: none; transition: background .15s, color .15s; }
.icon-btn:hover { color: var(--text); background: var(--bg-3); }
.icon-btn svg { width: 22px; height: 22px; }
.count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: var(--blue-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

/* ---------- แถบบน ---------- */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 28px; height: 64px; padding: 0 12px 0 20px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
.logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--blue); color: var(--blue-ink); font-weight: 700; font-size: 14px; letter-spacing: .02em; flex: none; }
.logo-mark.sm { width: 30px; height: 30px; font-size: 12.5px; }
.logo-mark svg { width: 62%; height: 62%; }
.logo-text { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.logo-text b { color: var(--blue); font-weight: 700; }
.nav { display: flex; gap: 24px; flex: none; }
.nav a[hidden], .menu [hidden] { display: none !important; }
.nav a { color: var(--text-2); font-size: 15.5px; white-space: nowrap; transition: color .15s; }
.nav a:hover, .nav a.on { color: var(--text); }
.search { flex: 1 1 300px; min-width: 200px; max-width: 490px; margin-inline: auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; color: var(--text-2); transition: border-color .15s; }
.search:focus-within { border-color: var(--text); }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 15px; }
.search input::placeholder { color: var(--text-3); }
.actions { position: relative; display: flex; align-items: center; gap: 12px; flex: none; }
#signInBtn.is-user { background: var(--bg-3); color: var(--text); max-width: 180px; padding: 0 12px 0 8px; }
#signInBtn.is-user .txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 240px; max-width: calc(100vw - 16px); padding: 6px; background: var(--pop); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px var(--shadow); }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; color: var(--text-2); font-size: 14.5px; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--bg-4); color: var(--text); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; color: var(--text-2); font-size: 14.5px; }
.theme-row > span { display: inline-flex; align-items: center; gap: 12px; }
.menu .theme-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-4); }
.menu .theme-seg button { display: inline-grid; place-items: center; width: 36px; height: 30px; padding: 0; border-radius: 8px; color: var(--text-3); }
.menu .theme-seg button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu .theme-seg button svg { width: 17px; height: 17px; }
.menu .theme-seg button:hover { background: var(--bg-3); color: var(--text); }
.menu .theme-seg button.on { background: var(--bg-2); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.menu .nav-dup { display: none; }
.menu-user { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.menu-user b, .menu-user small { display: block; }
.menu-user small { color: var(--text-3); }
.pill-ok { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 99px; background: rgba(60, 207, 145, .14); color: var(--green); font-size: 12px; }

/* ---------- หมวดหมู่ ---------- */
.channels { display: flex; align-items: center; gap: 12px; padding: 6px 12px 14px 8px; }
.all-ch { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 20px 0 8px; border-radius: 10px; background: var(--bg-3); font-size: 16px; white-space: nowrap; flex: none; transition: box-shadow .15s; }
.all-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--bg-4); }
.all-ch.on { box-shadow: inset 0 0 0 1.5px var(--text-3); }
.ch-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-4); color: var(--text-2); flex: none; transition: opacity .15s; }
.ch-arrow svg { width: 16px; height: 16px; }
.ch-arrow.light { background: var(--inv-bg); color: var(--inv-text); }
.ch-arrow.dim { opacity: .3; pointer-events: none; }
.ch-track { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ch-track::-webkit-scrollbar { display: none; }
.ch { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 10px; flex: none; text-align: left; transition: background .15s; }
.ch:hover { background: var(--bg-3); }
.ch.on { background: var(--bg-3); box-shadow: inset 0 0 0 1.5px var(--blue); }
.ch-thumb { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex: none; }
.ch-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.ch-thumb img.ready { opacity: 1; }
.ch-name { font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.ch-sub { display: block; color: var(--text-3); font-size: 12.5px; font-weight: 400; }

/* ---------- แกลเลอรี ---------- */
.result-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2); font-size: 13.5px; transition: .15s; }
.chip svg { width: 14px; height: 14px; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px; }
.grid-empty { grid-column: 1 / -1; }
.tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--ph, var(--bg-3)); }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile img.ready { opacity: 1; }
@media (hover: hover) { .tile:hover img { transform: scale(1.045); } }
.tile-badge { position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: 99px; background: var(--blue); color: var(--blue-ink); font-size: 12px; font-weight: 700; }
.tile-info { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 4px; padding: 44px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .86)); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.tile:focus-visible .tile-info { opacity: 1; transform: none; }
@media (hover: hover) { .tile:hover .tile-info { opacity: 1; transform: none; } }
.tile-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.tile-artist { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); }
.tile-artist > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-price { font-weight: 600; flex: none; }
.av { display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--av); color: #fff; font-size: calc(var(--s) * .45); font-weight: 700; line-height: 1; flex: none; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.mini-grid.big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- ท้ายหน้า ---------- */
.footer { padding: 40px 20px 130px; border-top: 1px solid var(--line); margin-top: 4px; }
.pipe-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 32px; }
.pipe-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--bg-3); font-size: 13.5px; color: var(--text-2); }
.pipe-chip svg { width: 16px; height: 16px; color: var(--blue); }
.pipe-chip b { color: var(--text); font-weight: 600; }
.pipe-arrow { color: var(--text-3); }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; max-width: 1180px; margin: 0 auto; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand b, .foot-brand small { display: block; }
.foot-brand small { color: var(--text-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--text-2); }
.foot-links a:hover { color: var(--text); }
.foot-note { max-width: 1180px; margin: 20px auto 0; color: var(--text-3); font-size: 12.5px; }

/* ---------- แถบล่างลอย ---------- */
.bottom { position: fixed; inset: auto 0 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); pointer-events: none; }
.bottom > * { pointer-events: auto; }
.round-btn { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--inv-bg); color: var(--inv-text); box-shadow: 0 6px 22px var(--shadow); transition: transform .15s; }
.round-btn:hover { transform: translateY(-2px); }
.round-btn svg { width: 24px; height: 24px; }
#toTop { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
#toTop.show { opacity: 1; transform: none; pointer-events: auto; }
.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--inv-bg); box-shadow: 0 6px 24px var(--shadow); }
.tabs button { height: 44px; padding: 0 26px; border-radius: 999px; color: var(--inv-text); font-size: 15px; font-weight: 500; transition: background .15s; }
.tabs button:hover:not(.on) { background: var(--inv-hover); }
.tabs button.on { background: var(--inv-on); color: var(--inv-on-text); }
.dot { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.filter-pop { position: absolute; right: 16px; bottom: 84px; width: min(360px, calc(100vw - 32px)); padding: 18px; background: var(--pop); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.fp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fp-sec { margin-top: 14px; }
.fp-sec .lbl { margin-bottom: 8px; }
.filter-pop input[type=range] { width: 100%; accent-color: var(--blue); }

/* ---------- หน้าอื่น ๆ: แสดงแทนแกลเลอรีใต้เมนูหลัก (เมนูหลักอยู่ทุกหน้า) ---------- */
:root { --head: 64px; } /* ความสูงแถบเมนูหลักบนจอใหญ่ (ใช้กับหน้าผลงานที่แผงซื้อติดด้านบน) */
.page { background: var(--bg); animation: pageIn .22s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
body.on-page .channels, body.on-page #hello, body.on-page #resultBar, body.on-page #grid,
body.on-page .bottom .tabs, body.on-page #filterBtn, body.on-page #filterPop { display: none !important; }
body.on-page .masthead { border-bottom: 1px solid var(--line); }
.page-head { display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 16px 16px 0; }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 14px; }
.crumbs a { flex: none; color: var(--text-3); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { flex: none; color: var(--text-3); }
.crumbs h1 { min-width: 0; margin: 0; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.crumbs h1 svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--text-3); }
.page-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.page-head + .wrap, .page-head + .search-page { padding-top: 18px; }
.crumb { color: var(--text-3); font-weight: 400; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 16px 96px; }
.wrap.narrow { max-width: 820px; }
.intro { max-width: 760px; margin-bottom: 28px; }
.intro h1 { font-size: clamp(26px, 3.4vw, 38px); margin: 6px 0 10px; letter-spacing: -.01em; }
.intro p { font-size: 16px; margin: 0; }
.eyebrow { color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sec-title { font-size: 19px; margin: 40px 0 14px; }
.card { padding: 20px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 16px; }
.card-title { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 12px; }
.card-title svg { color: var(--blue); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.empty-state { display: grid; justify-items: center; gap: 4px; padding: 64px 16px; text-align: center; }
.empty-state > svg { width: 44px; height: 44px; color: var(--text-3); margin-bottom: 8px; }
.empty-state h2 { margin: 0; font-size: 19px; }
.empty-state p { margin: 0 0 16px; }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--bg-4); color: var(--text-2); font-size: 12.5px; }

/* ---------- หน้าผลงาน ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "head side" "viewer side" "more side"; align-items: start; background: var(--viewer); }
.detail-head { grid-area: head; min-width: 0; }
.detail-head .page-head { max-width: none; padding: 14px 24px 0; }
.viewer { grid-area: viewer; min-width: 0; padding: 18px 24px 8px; }
.more { grid-area: more; min-width: 0; padding: 0 24px 48px; }
.more .sec-title { margin-top: 24px; }
.viewer-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-3); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.seg button svg { width: 17px; height: 17px; }
.seg button.on { background: var(--text); color: var(--bg); }
.seg.block { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 12px; }
.seg.block button { border-radius: 9px; height: 40px; }
.tones { display: flex; gap: 8px; }
.tones button { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tones button.on { outline: 2px solid var(--blue); outline-offset: 2px; }
.stage { display: grid; place-items: center; height: calc(100vh - var(--head) - 162px); height: calc(100dvh - var(--head) - 162px); min-height: 380px; container-type: size; }
.orig { display: block; box-shadow: 0 24px 70px rgba(0, 0, 0, .65); }
.orig img { width: 100%; height: 100%; object-fit: cover; }
.stage-note { min-height: 20px; margin: 10px 0 0; color: var(--text-3); font-size: 13px; text-align: center; }

.wall-wrap { position: relative; width: 100%; aspect-ratio: 300 / 230; container-type: inline-size; }
.wall { --cm: calc(100cqw / 300); position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background-color: var(--wall); background-image: radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, .28), transparent 62%), linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .14)); transition: background-color .3s; }
.floor { position: absolute; inset: auto 0 0; height: calc(var(--cm) * 12); background: linear-gradient(#a57c57, #86603f); box-shadow: 0 -2px 0 rgba(0, 0, 0, .12); }
.sofa { position: absolute; left: 50%; bottom: calc(var(--cm) * 9); width: calc(var(--cm) * 200); height: auto; transform: translateX(-50%); filter: drop-shadow(0 calc(var(--cm) * 2) calc(var(--cm) * 3) rgba(0, 0, 0, .25)); }
.on-wall { position: absolute; left: 50%; bottom: calc(var(--cm) * 114); transform: translateX(-50%); }
.wall-row { position: absolute; left: 50%; bottom: calc(var(--cm) * 112); display: flex; align-items: center; gap: calc(var(--cm) * 10); transform: translateX(-50%); }

/* กรอบภาพ — ขนาดทั้งหมดอิง --cm จากตัวแม่ */
.framed { position: relative; background: var(--frame); box-shadow: 0 calc(var(--cm) * 1.6) calc(var(--cm) * 4) rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--cm) * .25) rgba(255, 255, 255, .1), inset 0 0 calc(var(--cm) * .5) rgba(0, 0, 0, .45); }
.framed .mat { position: relative; width: 100%; height: 100%; background: #fbfaf6; }
.framed .mat::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 calc(var(--cm) * .7) rgba(0, 0, 0, .4); pointer-events: none; }
.framed .mat img { width: 100%; height: 100%; object-fit: cover; }
.framed.bare { box-shadow: 0 calc(var(--cm) * 1) calc(var(--cm) * 2.5) rgba(0, 0, 0, .3); }
.framed.bare .mat { background: none; }
.framed.bare .mat::after { display: none; }

.side { grid-area: side; align-self: start; position: sticky; top: var(--head); display: flex; flex-direction: column; height: calc(100vh - var(--head)); height: calc(100dvh - var(--head)); background: var(--bg-2); border-left: 1px solid var(--line); }
.side-scroll { flex: 1; overflow-y: auto; padding: 22px 22px 26px; }
.artist { display: flex; align-items: center; gap: 12px; }
.artist-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.artist-meta { display: block; color: var(--text-3); font-size: 13px; line-height: 1.45; }
.artist:hover .artist-name { color: var(--blue); }
.verified { display: inline-flex; color: var(--blue); }
.verified svg { width: 17px; height: 17px; }
.art-title { margin: 18px 0 8px; font-size: 25px; font-weight: 700; }
.stats { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; color: var(--text-3); font-size: 13.5px; }
.stats > * { display: inline-flex; align-items: center; gap: 6px; }
.stats svg { width: 17px; height: 17px; }
.like { color: var(--text-2); padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--bg-3); }
.like:hover { color: var(--text); }
.like.on { color: var(--red); }
.like.on svg { fill: currentColor; }
.like.save.on { color: var(--blue); }
.stats .like { display: inline-flex; align-items: center; gap: 6px; }
.artist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.artist-row .artist { min-width: 0; }
.follow-btn { flex: none; }
.follow-btn.on { background: var(--btn-gray); color: var(--text); }
.follow-btn.on:hover { background: var(--btn-gray-h); }
/* ปุ่มลัดบนการ์ดผลงาน (เฉพาะอุปกรณ์ที่ชี้เมาส์ได้) */
.tile-acts { position: absolute; top: 8px; right: 8px; z-index: 2; display: none; gap: 6px; }
@media (hover: hover) {
  .tile-acts { display: flex; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
  .tile:hover .tile-acts, .tile:focus-within .tile-acts { opacity: 1; transform: none; }
}
.tile-act { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .15s, transform .1s; }
.tile-act:hover { background: rgba(0, 0, 0, .78); }
.tile-act:active { transform: scale(.92); }
.tile-act svg { width: 17px; height: 17px; }
.tile-act.on svg { fill: currentColor; }
.tile-act.on[data-fav^="like"] { color: #ff6b78; }
.tile-act.on[data-fav^="save"] { color: #5cc6fa; }
.menu-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.saved-tabs { margin: 8px 0 22px; overflow-x: auto; max-width: 100%; }
.saved-tabs a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.saved-tabs svg { width: 17px; height: 17px; }
.nb-soft { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg-4); color: var(--text-2); font-size: 12px; line-height: 20px; text-align: center; }
.seg a.on .nb-soft { background: rgba(127, 127, 127, .25); color: inherit; }
.desc { margin: 16px 0; color: var(--text-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--bg-4); color: var(--text-2); font-size: 12.5px; }
.tag.cat { background: var(--blue-soft); color: var(--blue); }
.buy-tabs { margin: 4px 0 16px; }
.field { margin-top: 18px; }
.field-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.opts.three { grid-template-columns: repeat(3, 1fr); }
.opt { display: grid; gap: 1px; padding: 9px 6px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); font-size: 12.5px; text-align: center; line-height: 1.3; transition: border-color .15s, background .15s; }
.opt b { font-size: 14.5px; }
.opt small { color: var(--text-3); }
.opt:hover { border-color: var(--text-3); }
.opt.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.opt:disabled { opacity: .3; cursor: not-allowed; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 2px; border-radius: 8px; color: var(--text-2); font-size: 11.5px; transition: background .15s; }
.sw i { position: relative; width: 38px; height: 38px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sw i::after { content: ''; position: absolute; inset: 9px; background: var(--bg-2); box-shadow: inset 0 0 3px rgba(0, 0, 0, .6); }
.sw.none i { background: repeating-linear-gradient(45deg, var(--bg-4) 0 4px, var(--bg-3) 4px 8px); }
.sw.none i::after { display: none; }
.sw:hover { background: var(--bg-3); }
.sw.on { background: var(--bg-3); color: var(--text); }
.sw.on i { outline: 2px solid var(--blue); outline-offset: 2px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg-3); cursor: pointer; }
.toggle-row b, .toggle-row small { display: block; }
.toggle-row b { font-size: 14px; font-weight: 600; }
.toggle-row small { color: var(--text-3); font-size: 12.5px; }
.toggle-row.off { opacity: .6; cursor: default; }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 99px; background: var(--bg-4); cursor: pointer; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch:checked { background: var(--blue); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { cursor: default; }
.qty-row { display: flex; align-items: center; justify-content: space-between; }
.qty-row .field-label { margin: 0; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 8px; }
.stepper button { width: 36px; height: 36px; color: var(--text-2); font-size: 18px; }
.stepper button:hover { color: var(--text); }
.stepper span { min-width: 30px; font-weight: 600; text-align: center; }
.stepper.sm button { width: 30px; height: 30px; }
.breakdown { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--bg-3); font-size: 13.5px; }
.breakdown div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--text-2); }
.breakdown .earn { color: var(--green); }
.pickup-note { display: flex; gap: 10px; margin-top: 14px; color: var(--text-2); font-size: 13.5px; }
.pickup-note svg { color: var(--blue); }
.buy-bar { padding: 14px 22px 16px; background: var(--bg-2); border-top: 1px solid var(--line); }
.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--text-2); }
.total-row strong { color: var(--text); font-size: 24px; }
.buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.earn-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; color: var(--green); font-size: 13px; }
.earn-line svg { width: 16px; height: 16px; }

.lic-list { display: grid; gap: 8px; }
.lic { display: flex; gap: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; transition: border-color .15s; }
.lic input { accent-color: var(--blue); width: 18px; height: 18px; margin: 3px 0 0; flex: none; }
.lic.on { border-color: var(--blue); background: var(--blue-soft); }
.lic-body { display: grid; gap: 4px; flex: 1; }
.lic-top { display: flex; align-items: baseline; gap: 8px; }
.lic-top strong { margin-left: auto; font-size: 16px; }
.lic-desc { color: var(--text-2); font-size: 13.5px; }
.lic-file { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12.5px; }
.lic-file svg { width: 15px; height: 15px; }

/* ---------- ตะกร้า ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 61; display: flex; flex-direction: column; width: min(440px, 100vw); background: var(--bg-2); border-left: 1px solid var(--line); animation: slideIn .25s ease; }
@keyframes slideIn { from { transform: translateX(100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-head h2 .muted { font-size: 14px; font-weight: 400; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 20px; }
.drawer-foot { padding: 16px 20px calc(20px + var(--safe-b)); border-top: 1px solid var(--line); }
.drawer-foot p { margin: 0 0 12px; }
.cart-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ci-body { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-title { padding-right: 36px; font-weight: 600; }
.ci-title:hover { color: var(--blue); }
.ci-artist { color: var(--text-2); font-size: 13px; }
.ci-spec { color: var(--text-3); font-size: 12.5px; }
.ci-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ci-remove { position: absolute; top: 0; right: 0; font-size: 13px; color: var(--text-3); }
.ci-remove:hover { color: var(--red); }
.thumb-box { position: relative; display: grid; place-items: center; width: var(--box); height: var(--box); border-radius: 8px; background: #e7e1d6; flex: none; overflow: hidden; }
.thumb-box.lic { background: var(--bg-3); }
.thumb-box.lic img { width: 100%; height: 100%; object-fit: cover; }
.lic-tag { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; }
.lic-tag svg { width: 13px; height: 13px; }

/* ---------- หน้าต่าง modal และ toast ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .62); animation: fade .2s; }
.modal-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 24px 24px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: pop .2s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.modal-card h2 { margin: 0 0 6px; font-size: 21px; }
.modal-card > p, .modal-card .center > p { margin-top: 0; }
.modal-x { position: absolute; top: 10px; right: 10px; }
.big { color: var(--text); font-size: 20px; }
.qr { display: block; width: 160px; height: 160px; image-rendering: pixelated; border-radius: 8px; }
.qr.lg { width: 200px; height: 200px; margin: 16px auto 10px; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); z-index: 80; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--inv-bg); color: var(--inv-text); font-weight: 500; box-shadow: 0 12px 34px rgba(0, 0, 0, .45); opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { flex: none; padding: 6px 12px; border-radius: 8px; background: var(--inv-on); color: var(--inv-on-text); font-size: 13.5px; font-weight: 600; }

/* ---------- ฟอร์ม ---------- */
.lbl { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.req { color: var(--red); }
.input { width: 100%; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); outline: 0; transition: border-color .15s; }
textarea.input { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.input:focus { border-color: var(--blue); }
.input.invalid { border-color: var(--red); }
.err { min-height: 0; margin-top: 4px; color: var(--red); font-size: 13px; }
.err:empty { display: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.check input.invalid { outline: 2px solid var(--red); }
.form-card { margin-bottom: 0; }
.done-card { display: flex; gap: 14px; align-items: flex-start; }
.done-card > svg { width: 28px; height: 28px; color: var(--green); }
.done-card p { margin: 4px 0 0; }

/* ---------- ชำระเงิน ---------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.step { margin-bottom: 16px; padding: 22px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 18px; }
.step-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--blue-ink); font-size: 14px; font-weight: 700; flex: none; }
.branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.branch, .pay { display: flex; gap: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; transition: border-color .15s, background .15s; }
.branch input, .pay input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.branch b, .branch small, .pay b, .pay small { display: block; }
.branch small, .pay small { display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 12.5px; }
.branch small svg { width: 13px; height: 13px; }
.branch:has(input:checked), .pay:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.pay:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pays { display: grid; gap: 10px; }
.dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.date { position: relative; display: grid; justify-items: center; flex: none; width: 76px; padding: 10px 4px 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; }
.date input, .pill-opt input { position: absolute; opacity: 0; pointer-events: none; }
.date .dow, .date .m { color: var(--text-3); font-size: 12.5px; }
.date .d { font-size: 22px; font-weight: 700; line-height: 1.25; }
.date .soon { margin-top: 2px; padding: 0 6px; border-radius: 99px; background: rgba(60, 207, 145, .15); color: var(--green); font-size: 11px; }
.date:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.date:has(input:focus-visible), .pill-opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill-opt { position: relative; cursor: pointer; }
.pill-opt span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--bg-3); font-size: 14px; }
.pill-opt:has(input:checked) span { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }
.summary { position: sticky; top: 80px; padding: 20px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.summary h3 { margin: 0 0 6px; font-size: 17px; }
.summary > .btn { margin-top: 16px; }
.summary > .muted { margin: 10px 0 0; }
.sum-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sum-item b, .sum-item small { display: block; }
.sum-item small { color: var(--text-3); font-size: 12.5px; }
.sum-row { display: flex; justify-content: space-between; padding: 10px 0 0; color: var(--text-2); font-size: 14px; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.sum-total strong { font-size: 24px; }

/* ---------- คำสั่งซื้อ ---------- */
.success { padding: 8px 0 26px; text-align: center; }
.success .check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: rgba(60, 207, 145, .15); color: var(--green); }
.success .check svg { width: 30px; height: 30px; }
.success h1 { margin: 0 0 4px; font-size: 28px; }
.success p { margin: 0; }
.ticket { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 26px; border-radius: 18px; background: #f6f3ee; color: #17171a; }
.qr-wrap { display: grid; justify-items: center; gap: 4px; color: #6b6b72; font-size: 12px; }
.t-label { color: #6b6b72; font-size: 13px; }
.pickup-code { margin: 2px 0 14px; font: 700 40px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.t-grid span, .t-grid b, .t-grid small { display: block; }
.t-grid span { color: #6b6b72; font-size: 12.5px; }
.t-grid b { font-size: 14.5px; }
.t-grid small { color: #6b6b72; font-size: 12.5px; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 22px 0 26px; padding: 0; list-style: none; }
.timeline li { position: relative; padding-top: 22px; color: var(--text-3); font-size: 13px; }
.timeline li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--bg-4); }
.tl-dot { position: absolute; top: 1px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-4); }
.timeline li.done, .timeline li.now { color: var(--text); }
.timeline li.done::before, .timeline li.done .tl-dot { background: var(--green); }
.timeline li.now::before { background: linear-gradient(90deg, var(--green) 30%, var(--bg-4) 30%); }
.timeline li.now .tl-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(60, 207, 145, .22); }
.dl-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dl-row b, .dl-row small { display: block; }
.dl-row small { color: var(--text-3); font-size: 12.5px; }
.order-list { display: grid; gap: 10px; }
.order-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .15s; }
.order-card:hover { border-color: var(--line-2); }
.oc-thumbs { display: flex; gap: 4px; }
.oc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.status { padding: 1px 10px; border-radius: 99px; background: var(--bg-4); color: var(--text-2); font-size: 12px; }
.status.s3, .status.s4 { background: rgba(60, 207, 145, .15); color: var(--green); }
.status.s1, .status.s2 { background: var(--blue-soft); color: var(--blue); }
.oc-code { text-align: right; }
.oc-code small, .oc-code b { display: block; }
.oc-code small { color: var(--text-3); font-size: 12px; }
.oc-code b { font: 700 18px ui-monospace, Menlo, monospace; letter-spacing: .1em; }

/* ---------- ขายผลงาน ---------- */
.sell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.sell-media { position: sticky; top: 84px; }
.drop { display: grid; place-items: center; min-height: 420px; padding: 24px; border: 2px dashed var(--line-2); border-radius: 16px; background: var(--bg-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-soft); }
.drop:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.drop-inner { display: grid; justify-items: center; gap: 10px; }
.drop-inner > svg { width: 40px; height: 40px; color: var(--blue); }
.drop-inner img { max-height: 380px; width: auto; border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.res-info { display: flex; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--text-2); }
.res-info:empty { display: none; }
.res-info svg { color: var(--green); }
.price-row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.price-input { position: relative; }
.price-input span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 600; }
.price-input .input { padding-left: 32px; font-size: 18px; font-weight: 600; }
.earn-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: rgba(60, 207, 145, .07); border: 1px solid rgba(60, 207, 145, .25); font-size: 13.5px; }
.earn-box div { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); }
.earn-box b { color: var(--text); }
.earn-box b.green { color: var(--green); }

/* ---------- หน้าข้อมูล: มหาวิทยาลัย Interior ไลเซนส์ วิธีการทำงาน จุดรับภาพ ---------- */
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.uni { overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.uni-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 10; }
.uni-mosaic span { overflow: hidden; }
.uni-mosaic img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.uni-mosaic img.ready { opacity: 1; }
.uni-body { padding: 16px; }
.uni-body h3 { margin: 0; font-size: 16px; }
.uni-body p { margin: 2px 0 12px; font-size: 13.5px; }
.uni-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avs { display: flex; }
.avs .av { margin-right: -8px; box-shadow: 0 0 0 2px var(--bg-2); }

.cover { display: grid; grid-template-columns: repeat(6, 1fr); height: 200px; overflow: hidden; opacity: .55; }
.cover span { overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.profile { padding-top: 0; }
.profile-head { display: flex; align-items: flex-end; gap: 20px; margin-top: -48px; position: relative; }
.profile-head > .av { box-shadow: 0 0 0 5px var(--bg); }
.profile-info { flex: 1; min-width: 0; }
.profile-info h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; }
.profile-info p { margin: 2px 0 8px; }
.profile-stats { display: flex; gap: 18px; color: var(--text-2); font-size: 14px; }
.profile-stats b { color: var(--text); }

.hero-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; }
.hero-split h1 { font-size: clamp(26px, 3.2vw, 36px); margin: 8px 0 12px; }
.hero-split > div > p { font-size: 16px; }
.ticks { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--text-2); }
.ticks li { display: flex; gap: 10px; }
.ticks svg { color: var(--green); }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.set { overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.set-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.set-thumbs a { aspect-ratio: 3 / 4; overflow: hidden; }
.set-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.set-thumbs a:hover img { transform: scale(1.05); }
.set-body { display: grid; gap: 2px; padding: 14px 16px; }

.lic-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lic-card { padding: 22px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.lic-card h3 { margin: 4px 0 2px; font-size: 24px; }
.lic-card p { margin: 8px 0 0; }
.lic-mult { color: var(--blue); font-weight: 600; }
.note-card { display: flex; gap: 14px; margin-top: 20px; padding: 18px 20px; border-radius: 14px; background: rgba(60, 207, 145, .07); border: 1px solid rgba(60, 207, 145, .25); }
.note-card > svg { width: 26px; height: 26px; color: var(--green); }
.note-card p { margin: 4px 0 0; }

.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pipe-step { position: relative; display: grid; gap: 2px; align-content: start; padding: 18px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.pipe-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.pipe-n { position: absolute; top: 16px; right: 18px; color: var(--text-3); font: 600 13px ui-monospace, Menlo, monospace; }
.pipe-step b { font-size: 17px; }
.pipe-th { color: var(--text-3); font-size: 13px; }
.pipe-step p { margin: 8px 0 0; color: var(--text-2); font-size: 13.5px; }
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.model { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.model > svg { width: 26px; height: 26px; color: var(--blue); margin-bottom: 4px; }
.model b { font-size: 17px; }
.model p { margin: 0 0 6px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.how { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.how > svg { width: 26px; height: 26px; color: var(--blue); }
.how-n { position: absolute; top: 16px; right: 18px; color: var(--text-3); font-weight: 700; }
.how b { font-size: 16px; }
.how p { margin: 0; color: var(--text-2); font-size: 14px; }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.store { overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.store-map { display: grid; place-items: center; height: 120px; color: var(--blue); background-color: var(--map-bg); background-image: linear-gradient(var(--map-grid) 1px, transparent 1px), linear-gradient(90deg, var(--map-grid) 1px, transparent 1px), linear-gradient(35deg, transparent 46%, rgba(255, 255, 255, .1) 46% 50%, transparent 50%); background-size: 22px 22px, 22px 22px, 100% 100%; }
.store-map svg { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.store-body { padding: 16px; }
.store-body h3 { margin: 0; font-size: 17px; }
.store-body > p { margin: 2px 0 10px; }
.store-info { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; color: var(--text-2); font-size: 13.5px; }
.store-info li { display: flex; gap: 8px; }
.store-info svg { width: 16px; height: 16px; margin-top: 3px; color: var(--text-3); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { display: grid; gap: 2px; padding: 18px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.kpi span, .kpi small { color: var(--text-3); font-size: 13px; }
.kpi b { font-size: 26px; }
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table th { background: var(--bg-2); color: var(--text-3); font-weight: 500; font-size: 13px; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 1440px) {
  .nav a:nth-child(n+5) { display: none; }
  .menu .nav-dup { display: flex; }
}
@media (max-width: 1240px) {
  .nav a:nth-child(n+3) { display: none; }
}
@media (max-width: 1060px) {
  .nav { display: none; }
  .menu .nav-dup { display: flex; }
  .detail { grid-template-columns: 1fr; grid-template-areas: "head" "viewer" "side" "more"; }
  .detail-head .page-head { padding: 12px 16px 0; }
  .viewer { padding: 14px 16px 20px; }
  .more { padding: 0 16px 40px; }
  .stage { height: auto; aspect-ratio: var(--ar, 1); max-height: 72vh; min-height: 0; }
  .side { position: static; height: auto; border-left: 0; border-top: 1px solid var(--line); }
  .side-scroll { overflow: visible; padding: 20px 16px; }
  .buy-bar { position: sticky; bottom: 0; z-index: 4; padding: 12px 16px calc(14px + var(--safe-b)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .4); }
  .checkout, .sell, .hero-split { grid-template-columns: minmax(0, 1fr); }
  .summary, .sell-media { position: static; }
  .lic-cards, .models { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .masthead { position: relative; }
  .topbar { flex-wrap: wrap; height: auto; gap: 10px; padding: 10px 12px; }
  .logo-text { font-size: 15.5px; }
  .actions { margin-left: auto; gap: 6px; }
  .actions .btn { width: 40px; padding: 0; }
  .actions .btn .txt { display: none; }
  #signInBtn.is-user { width: auto; padding: 0 8px; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .channels { padding: 2px 12px 12px; gap: 8px; }
  .all-ch { height: 58px; padding: 0 8px; }
  .all-txt, .ch-arrow { display: none; }
  .ch { padding-right: 12px; }
  .ch-name { font-size: 14.5px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; }
  .result-bar { padding: 0 12px 10px; }
  .bottom { padding: 0 12px 12px; }
  .round-btn { width: 48px; height: 48px; }
  .tabs button { height: 40px; padding: 0 16px; font-size: 14px; }
  .filter-pop { right: 12px; bottom: 72px; }
  .footer { padding: 32px 16px 110px; }
  .pipe-arrow { display: none; }
  .crumbs .crumb, .hide-sm { display: none; }
  .wrap { padding: 24px 16px 80px; }
  .art-title { font-size: 22px; }
  .opts { grid-template-columns: repeat(2, 1fr); }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .form-grid, .branches, .price-row { grid-template-columns: 1fr; }
  .step { padding: 18px 16px; }
  .ticket { grid-template-columns: 1fr; justify-items: center; gap: 16px; text-align: center; padding: 22px 16px; }
  .t-grid { grid-template-columns: 1fr; gap: 10px; }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li { padding: 0 0 14px 28px; }
  .timeline li::before { top: 0; bottom: 0; left: 5px; right: auto; width: 3px; height: auto; }
  .timeline li.now::before { background: var(--bg-4); }
  .timeline li:last-child::before { display: none; }
  .tl-dot { top: 3px; }
  .order-card { grid-template-columns: 1fr; }
  .oc-code { text-align: left; }
  .cover { height: 130px; grid-template-columns: repeat(3, 1fr); }
  .profile-head { flex-wrap: wrap; align-items: flex-start; }
  .pipeline { grid-template-columns: 1fr; }
  .kpi b { font-size: 21px; }
  .drop { min-height: 260px; }
  .drop-inner img { max-height: 280px; }
  .toast { bottom: calc(80px + var(--safe-b)); }
  /* iOS ซูมเข้าเองถ้าช่องกรอกตัวอักษรเล็กกว่า 16px */
  .input, .search input { font-size: 16px; }
  /* เป้าแตะให้ใหญ่พอสำหรับนิ้ว */
  .foot-links { gap: 0 4px; }
  .foot-links a { display: inline-block; padding: 10px 8px; }
  .like { padding: 7px 12px 7px 10px; }
  .tag { height: 32px; padding: 0 12px; }
  .stepper button { width: 42px; height: 42px; }
  .drawer-head { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   หน้าค้นหา · โปรไฟล์ศิลปิน + บล็อก · เขียนบล็อก · ระบบหลังบ้าน
   ====================================================================== */
.seg a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.seg a.on { background: var(--text); color: var(--bg); }
.input.sm { width: auto; height: 38px; font-size: 14px; }
.cta-row.compact { margin: 16px 0 0; }

/* สถานะผลงานที่รอตรวจ */
.tile-badge.pending { background: #f4b740; color: #2b1d00; }
.tile-badge.rejected { background: var(--red); color: #fff; }
.status-banner { display: flex; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; background: rgba(244, 183, 64, .1); border: 1px solid rgba(244, 183, 64, .35); color: var(--amber-text); font-size: 13.5px; }
.status-banner svg { width: 18px; height: 18px; margin-top: 2px; }
.status-banner.rejected { background: rgba(255, 95, 109, .1); border-color: rgba(255, 95, 109, .35); color: var(--danger-text); }
.buy-actions.one { grid-template-columns: 1fr; }

/* โปรไฟล์ศิลปิน */
.pf { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; max-width: 1440px; margin: 0 auto; padding: 28px 24px 120px; }
.pf-side { position: sticky; top: 84px; display: grid; justify-items: center; gap: 4px; padding: 28px 22px 22px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; }
.pf-avatar { position: relative; margin-bottom: 12px; }
.pf-avatar .av { box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 6px var(--line-2); }
.pf-badge { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px; background: var(--blue); color: var(--blue-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pf-side h1 { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 22px; }
.pf-headline { margin: 0 0 12px; color: var(--text-2); }
.pf-facts { display: grid; gap: 10px; width: 100%; margin: 6px 0 18px; padding: 0; list-style: none; color: var(--text-2); font-size: 14px; text-align: left; }
.pf-facts li { display: flex; gap: 10px; }
.pf-facts svg { width: 18px; height: 18px; margin-top: 2px; color: var(--text-3); }
.pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.pf-actions > .btn:not(.icon-only) { flex: 1 1 calc(50% - 4px); }
.pf-actions > .icon-only { flex: none; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-stats b { display: block; font-size: 19px; }
.pf-stats span { color: var(--text-3); font-size: 12.5px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.pf-head h2 { margin: 0; font-size: 24px; }
.pf-head h2 .muted { margin-left: 6px; font-size: 15px; font-weight: 400; }
.pf-tools { display: flex; align-items: center; gap: 8px; }
.page-tabs { position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); z-index: 8; transform: translateX(-50%); }
.page-tabs a { display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border-radius: 999px; color: var(--inv-text); font-size: 15px; font-weight: 500; white-space: nowrap; }
.page-tabs a.on { background: var(--inv-on); color: var(--inv-on-text); }
.about { display: grid; gap: 26px; max-width: 720px; }
.about h2 { margin: 0 0 8px; font-size: 24px; }
.about h3 { margin: 0 0 8px; font-size: 16px; }
.about p { margin: 0; color: var(--text-2); }

/* บล็อก */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.post-grid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .15s, transform .2s; }
@media (hover: hover) { .post-card:hover { border-color: var(--line-2); transform: translateY(-2px); } }
.pc-cover { aspect-ratio: 16 / 9; overflow: hidden; }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.pc-cover img.ready { opacity: 1; }
.pc-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px 16px 16px; }
.pc-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--text-3); font-size: 12.5px; }
.pc-title { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-artist { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.pc-stats { display: flex; gap: 16px; margin-top: auto; padding-top: 6px; color: var(--text-2); font-size: 13.5px; }
.pc-stats span { display: inline-flex; align-items: center; gap: 6px; }
.pc-stats svg { width: 16px; height: 16px; }
.intro-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.intro-row .intro { margin: 0; }
.blog-cats { margin-bottom: 22px; }
.post { padding-bottom: 80px; }
.post-cover { aspect-ratio: 21 / 9; max-height: 60vh; width: 100%; overflow: hidden; background: var(--bg-2); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 0; }
.post-meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.post-wrap h1 { margin: 12px 0 18px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.01em; }
.post-body { margin-top: 24px; color: var(--text-body); font-size: 17px; line-height: 1.85; }
.post-body p { margin: 0 0 18px; }
.post-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 24px; }
.pg-item { display: block; overflow: hidden; border-radius: 8px; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; }
.pg-item:only-child { grid-column: 1 / -1; }
.post-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.post-actions > span, .post-actions .like { display: inline-flex; align-items: center; gap: 6px; }
.post-actions svg { width: 17px; height: 17px; }

/* เขียนบล็อก */
.cover-drop { min-height: 240px; }
.cover-drop .drop-inner img { max-height: 300px; }
.thumbs-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb-edit { position: relative; width: 96px; height: 96px; overflow: hidden; border-radius: 8px; }
.thumb-edit img { width: 100%; height: 100%; object-fit: cover; }
.thumb-edit button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .72); color: #fff; }
.thumb-edit button svg { width: 14px; height: 14px; }
.add-img { display: grid; place-items: center; align-content: center; gap: 4px; width: 96px; height: 96px; border-radius: 8px; border: 2px dashed var(--line-2); color: var(--text-2); font-size: 13px; cursor: pointer; }
.add-img:hover, .add-img:has(input:focus-visible) { border-color: var(--blue); color: var(--text); }
.author-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; }

/* ค้นหา */
.search-page { padding: 32px 0 120px; }
.big-search { display: flex; align-items: center; gap: 14px; max-width: 860px; height: 64px; margin: 0 auto; padding: 0 10px 0 22px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--bg-2); }
.big-search:focus-within { border-color: var(--text); }
.big-search > svg { width: 26px; height: 26px; color: var(--text-2); }
.big-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 22px; }
.big-search input::-webkit-search-cancel-button { display: none; }
.s-tabs { display: flex; justify-content: center; gap: 28px; margin: 22px 0 18px; border-bottom: 1px solid var(--line); }
.s-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px 14px; color: var(--text-3); font-size: 17px; font-weight: 600; white-space: nowrap; }
.s-tabs button span { padding: 0 8px; border-radius: 99px; background: var(--bg-3); font-size: 12.5px; font-weight: 500; }
.s-tabs button.on { color: var(--text); }
.s-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--blue); }
.s-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.s-filters:empty { display: none; }
.select-pill select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 36px 0 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text); font-size: 14.5px; cursor: pointer; }
.select-pill select:focus { border-color: var(--blue); outline: 0; }
.s-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 16px 0; }
.s-popular > span { margin-right: 4px; font-size: 13.5px; }
.s-count { margin: 16px 16px 10px; font-size: 13.5px; }
#sResults > .post-grid, #sResults > .artist-grid { padding: 0 16px; }
.artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.artist-card { overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.ac-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; aspect-ratio: 3 / 1; }
.ac-thumbs span { overflow: hidden; }
.ac-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ac-body { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
@media (hover: hover) { .artist-card:hover .artist-name { color: var(--blue); } }

/* ระบบหลังบ้าน */
.demo-note { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 14px; border-radius: 10px; background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--text-2); font-size: 13.5px; }
.admin-tabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-bottom: 22px; }
.nb { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.kpis.five { grid-template-columns: repeat(5, 1fr); }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.kb-col { min-height: 160px; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.kb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.kb-head span { padding: 0 8px; border-radius: 99px; background: var(--bg-4); font-size: 12px; }
.kb-card { display: grid; gap: 2px; margin-bottom: 8px; padding: 10px; border-radius: 8px; background: var(--bg-3); font-size: 13px; }
.kb-card small { color: var(--text-3); font-size: 12px; }
.admin-table td { vertical-align: top; }
.wrap-cell { min-width: 220px; white-space: normal !important; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.review { overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.rv-img { display: block; max-height: 320px; overflow: hidden; background: var(--bg-3); }
.rv-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.rv-actions { display: flex; gap: 8px; margin-top: 8px; }
.cell-artist { display: flex; align-items: center; gap: 10px; }

@media (max-width: 1060px) {
  .pf { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px 110px; }
  .pf-side { position: static; order: -1; }
  .kpis.five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .search-page { padding-top: 20px; }
  .big-search { height: 54px; margin: 0 16px; padding-left: 16px; }
  .big-search input { font-size: 18px; }
  .s-tabs { justify-content: flex-start; gap: 20px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .s-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .select-pill { flex: none; }
  .select-pill select { font-size: 16px; }
  .post-grid, .post-grid.wide { grid-template-columns: 1fr; }
  .page-tabs a { height: 40px; padding: 0 16px; font-size: 14px; }
  .post-cover { aspect-ratio: 16 / 10; }
  .post-body { font-size: 16px; }
  .post-gallery { grid-template-columns: 1fr; }
  .pf-side { padding: 22px 16px 18px; }
  .kanban { grid-template-columns: repeat(5, 72vw); }
  .admin-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .input.sm { font-size: 16px; }
}

/* เข้าสู่ระบบด้วย Google */
.av-img { width: var(--s); height: var(--s); border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-4); }
.g-wrap { display: flex; justify-content: center; align-items: center; min-height: 48px; margin: 20px 0 14px; }
/* ปุ่ม Google อยู่ใน iframe โทนสว่าง: ให้ color-scheme ตรงกัน ไม่งั้น Chrome ทาพื้นขาวทึบรอบปุ่ม */
.g-wrap { color-scheme: light; }
.nowrap { white-space: nowrap; }
.menu-user small.via { color: var(--text-3); font-size: 11.5px; }

/* บัญชีผู้ใช้และบทบาท */
.auth-tabs { margin: 14px 0 4px; }
#authForm .lbl { margin-top: 12px; }
.or { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; color: var(--text-3); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.member-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); }
.member-note svg { flex: none; width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
.member-note span { display: grid; gap: 2px; }
.member-note small { color: var(--text-3); font-size: 12.5px; }
.menu-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.menu-badges .pill-ok { margin: 0; }
.role-pill { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; }
.role-pill.supervisor { background: rgba(60, 207, 145, .14); color: var(--green); }
.role-pill.admin { background: rgba(244, 183, 64, .15); color: var(--amber); }
.role-pill.aff { background: rgba(185, 163, 240, .15); color: var(--purple); }
.role-pill.warn { background: rgba(255, 120, 90, .13); color: var(--orange); }
.users-table select.input.sm { min-width: 128px; }
.mt-xs { margin-top: 6px; }
.aff-add { margin-top: 8px; }
.aff-row { display: flex; flex-wrap: wrap; gap: 8px; }
.aff-row .input { flex: 1 1 180px; width: auto; }
.aff-row select.input { flex: 0 1 220px; }
/* มือถือ: ตารางผู้ใช้เป็นการ์ด ให้เลือกสังกัด/บทบาทได้โดยไม่ต้องเลื่อนข้าง */
@media (max-width: 720px) {
  .users-table thead { display: none; }
  .users-table, .users-table tbody { display: block; }
  .users-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; border-bottom: 1px solid var(--line); }
  .users-table tr:last-child { border-bottom: 0; }
  .users-table td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .users-table td:first-child { grid-column: 1 / -1; }
  .users-table td.num { text-align: left; }
  .users-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--text-3); font-size: 12px; }
  .users-table select.input.sm { width: 100%; min-width: 0; }
}
.cta-row.center { justify-content: center; }
.pc-cover { position: relative; }
.rv-kind { justify-self: start; padding: 1px 8px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font-size: 11.5px; font-weight: 600; }
.rv-kind.posts { background: rgba(185, 163, 240, .15); color: var(--purple); }
.sell-fields > .author-row { margin: 0 0 16px; }
.sell-fields > .check { margin-top: 4px; }

/* ---------- สถิติ (Admin) ---------- */
.stats-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stats-head p { margin: 0; max-width: 560px; }
.stats-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stats-tools .seg a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; color: var(--text-2); font-size: 13.5px; }
.stats-tools .seg a.on { color: var(--bg); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.chart-grid .card, .rank-grid .card { margin: 0; }
.card h3 { margin: 0 0 12px; font-size: 15.5px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart rect:hover, .chart circle:hover { opacity: .75; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--text-2); font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rank ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; display: grid; gap: 8px; }
.rank li { counter-increment: rank; display: grid; grid-template-columns: 20px auto 1fr auto auto; align-items: center; gap: 10px; font-size: 14px; }
.rank li::before { content: counter(rank); color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; grid-column: 1; }
.rank li:not(:has(.st-thumb)) .st-name { grid-column: 2 / 4; }
.st-thumb { display: block; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name small { display: block; color: var(--text-3); font-size: 12px; }
.rank b { font-variant-numeric: tabular-nums; }
.rank .unit { color: var(--text-3); font-size: 12px; }
.feed { margin: 0; padding: 6px 20px; list-style: none; }
.feed li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }
.feed li.dim { opacity: .62; }
.feed-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-4); color: var(--text-2); }
.feed-ic svg { width: 15px; height: 15px; }
.feed-ic.like-art, .feed-ic.like-post { background: rgba(229, 72, 107, .14); color: #e5486b; }
.feed-ic.save-art, .feed-ic.save-post, .feed-ic.follow { background: var(--blue-soft); color: var(--blue); }
.feed-ic.upload-art, .feed-ic.upload-post, .feed-ic.approve { background: rgba(60, 207, 145, .14); color: var(--green); }
.feed-ic.reject { background: rgba(255, 95, 109, .12); color: var(--red); }
@media (max-width: 720px) {
  .chart-grid { grid-template-columns: 1fr; }
  .feed { padding: 4px 14px; }
  .feed li { grid-template-columns: 28px 1fr; }
  .feed li small { grid-column: 2; }
}

/* ---------- แชร์ ---------- */
.like.share { display: inline-flex; align-items: center; gap: 6px; }
.btn.icon-only { width: 38px; padding: 0; }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.share-opt { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; }
.share-opt:hover { border-color: var(--line-2); background: var(--bg-4); }
.share-opt b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 22px; font-family: Arial, sans-serif; }
.share-opt.fb b { background: #1877f2; }
.share-opt.line b { background: #06c755; }
.share-opt.x b { background: #111; border: 1px solid #333; }
.copy-row { display: flex; gap: 8px; }
.copy-row .input { flex: 1; min-width: 0; font-size: 13.5px; }

/* ---------- ภาษา ---------- */
.lang-btn { width: auto; min-width: 40px; padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.menu .lang-seg button { width: 44px; font-size: 13px; font-weight: 600; }
@media (max-width: 480px) { .lang-btn { display: none; } }

/* ---------- ภาพหลายมุม · แก้ไข/ลบ ---------- */
.views-strip { display: flex; justify-content: center; gap: 8px; margin-top: 12px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.views-strip button { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--bg-3); opacity: .7; transition: opacity .15s, border-color .15s; }
.views-strip button:hover { opacity: 1; }
.views-strip button.on { border-color: var(--blue); opacity: 1; }
.views-strip img { width: 100%; height: 100%; object-fit: cover; }
.tile-multi { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; transition: opacity .15s; }
.tile-multi svg { width: 13px; height: 13px; }
@media (hover: hover) { .tile:hover .tile-multi { opacity: 0; } }
.owner-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.btn.danger, .btn-ghost.danger { color: var(--red); border-color: rgba(255, 95, 109, .4); }
.btn.danger:hover { background: rgba(255, 95, 109, .1); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.edit-main { width: 100%; max-height: 520px; overflow: hidden; border-radius: 10px; background: var(--bg-3); display: grid; place-items: center; }
.edit-main img { width: 100%; height: 100%; object-fit: contain; }
.note-inline { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); color: var(--text-2); font-size: 13.5px; }
.note-inline svg { flex: none; width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }
.gallery-field { margin-top: 18px; }
.gallery-field > p { margin: 4px 0 10px; }
.edit-cover { max-height: 260px; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }

/* ---------- reaction · ความคิดเห็น ---------- */
.react-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.react { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 99px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; transition: transform .1s, border-color .15s, background .15s; }
.react:hover { border-color: var(--line-2); }
.react:active { transform: scale(.94); }
.react .emo { font-size: 16px; line-height: 1; }
.react.on { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }
.stat-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.stat-link:hover { color: var(--text); }
.like.flag { color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.like.flag:hover { color: var(--red); }
.comments { margin-top: 8px; }
.comments .sec-title { display: flex; align-items: baseline; gap: 8px; }
.cm-form { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.cm-input { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cm-input textarea { resize: vertical; min-height: 44px; }
.cm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cm-guest { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); }
.cm-guest > span { flex: 1; }
.cm-list { display: grid; gap: 16px; }
.cm { display: flex; gap: 10px; align-items: flex-start; }
.cm-main { flex: 1; min-width: 0; }
.cm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; }
.cm-name { font-weight: 600; color: var(--text); }
a.cm-name:hover { color: var(--blue); }
.cm-body { margin: 4px 0 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.cm-tools { display: flex; gap: 14px; }
.cm-tools button { color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.cm-tools button:hover { color: var(--text); }
.cm-replies { display: grid; gap: 12px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--line); }
.cm-replies:not(:has(.cm, form)) { display: none; }
.cm-form.reply { margin: 0; }
.cm.deleted .cm-head { font-style: italic; }
.cm-gone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); color: var(--text-3); }
.cm-gone svg { width: 15px; height: 15px; }
.cm-empty { padding: 6px 0; }
/* ---------- รายงาน ---------- */
.rp-reasons { display: grid; gap: 6px; margin: 10px 0 4px; padding: 0; border: 0; }
.opt-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.opt-row:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.opt-row input { margin-top: 3px; accent-color: var(--blue); }
.opt-row span { display: grid; gap: 1px; }
.opt-row small { color: var(--text-3); font-size: 12.5px; }
#reportForm:not(:has(input[value="copyright"]:checked)) .rp-copy { display: none; }
#reportForm .lbl { margin-top: 12px; }
.report-list { display: grid; gap: 12px; }
.report { margin: 0; }
.rp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rp-items { margin: 10px 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.rp-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; }
.rp-reason { padding: 1px 8px; border-radius: 99px; background: var(--bg-4); font-size: 12px; font-weight: 600; }
.rp-reason.copyright { background: rgba(244, 183, 64, .16); color: var(--amber); }
.rp-reason.inappropriate { background: rgba(255, 95, 109, .12); color: var(--red); }
/* ---------- คอลเลกชัน ---------- */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.col-card { display: grid; gap: 10px; }
.col-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-3); }
.col-cover > span { position: relative; overflow: hidden; }
.col-cover img { width: 100%; height: 100%; object-fit: cover; }
.col-card:hover .col-cover { outline: 2px solid var(--blue); outline-offset: 2px; }
.col-meta { display: grid; gap: 2px; }
.col-meta small { color: var(--text-3); font-size: 12.5px; }
.col-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.col-bar p { margin: 0; }
.col-pick { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; margin: 14px 0; }
.col-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.col-row:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.col-row input { accent-color: var(--blue); width: 18px; height: 18px; }
.col-row > span { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.col-row svg { width: 17px; height: 17px; color: var(--text-3); }
.col-row small { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.col-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.col-new .input { flex: 1 1 200px; }
.col-new .err { flex-basis: 100%; }
.check.sm { font-size: 13px; }
.col-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 8px 0 22px; }
.col-head h1 { margin: 6px 0; font-size: 30px; }
.col-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.col-head .eyebrow svg { width: 15px; height: 15px; }
.col-head p.small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.col-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.col-x { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; }
.col-x svg { width: 15px; height: 15px; }
.col-x:hover { background: var(--red); }
/* ---------- ระดับ · เหรียญ · อันดับ ---------- */
.lvl { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--bg-4); color: var(--text-2); }
.lvl-2 { background: rgba(60, 207, 145, .14); color: var(--green); }
.lvl-3 { background: var(--blue-soft); color: var(--blue); }
.lvl-4 { background: rgba(185, 163, 240, .16); color: var(--purple); }
.lvl-5 { background: rgba(244, 183, 64, .18); color: var(--amber); }
.artist-card .lvl { margin-top: 4px; justify-self: start; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.badge-emo { font-size: 17px; line-height: 1; cursor: default; }
.pf-level { display: grid; justify-items: center; gap: 6px; margin: 10px 0 4px; width: 100%; }
.lvl-bar { width: 100%; max-width: 220px; height: 6px; border-radius: 99px; background: var(--bg-4); overflow: hidden; }
.lvl-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--green)); }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 14px; margin: 8px 0 24px; }
.podium-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 14px 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; }
.podium-card.p1 { order: 2; padding-top: 34px; border-color: rgba(244, 183, 64, .5); box-shadow: 0 10px 30px var(--shadow); }
.podium-card.p2 { order: 1; }
.podium-card.p3 { order: 3; }
.podium-card small { color: var(--text-3); font-size: 12.5px; }
.podium-card .medal { position: absolute; top: -16px; font-size: 32px; }
.podium-card .pts { font-size: 22px; font-weight: 700; }
.podium-card .pts small { font-size: 12px; font-weight: 400; }
.rank-n { display: inline-grid; place-items: center; min-width: 24px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lb-table td { vertical-align: middle; }
.lb-help { margin-top: 18px; }
.lb-help summary { cursor: pointer; font-weight: 600; }
.ranked .tile::after { content: attr(data-rank); position: absolute; top: 8px; left: 8px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12.5px; font-weight: 700; }
@media (max-width: 720px) {
  .podium { grid-template-columns: 1fr; }
  .podium-card.p1, .podium-card.p2, .podium-card.p3 { order: 0; }
}
/* ---------- บัญชี: ลืมรหัส · ยืนยันอีเมล ---------- */
.auth-page .card { margin-top: 24px; }
.auth-page h1 { margin-top: 0; font-size: 24px; }
.forgot-row { margin: 6px 0 0; text-align: right; }
.verify-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; background: rgba(244, 183, 64, .1); border: 1px solid rgba(244, 183, 64, .35); color: var(--amber-text); font-size: 13.5px; }
.verify-note > span { flex: 1; min-width: 200px; }
.verify-note svg { flex: none; width: 18px; height: 18px; }
.verify-note.compact { margin: 0; padding: 8px 10px; font-size: 12.5px; }

/* ภาษาอังกฤษ: ชื่อหมวดแปลแล้วซ้ำกับคำอังกฤษใต้ชื่อ */
html.lang-en .ch-sub { display: none; }

/* แท็บเล็ต: ปุ่มบนหัวเว็บเหลือแค่ไอคอน กันล้นจอ */
@media (min-width: 721px) and (max-width: 960px) {
  .actions .btn { width: 40px; padding: 0; }
  .actions .btn .txt { display: none; }
  #signInBtn.is-user { width: auto; padding: 0 8px; }
}

/* ---------- งานผลิต · แจ้งเตือน ---------- */
.prod-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.prod-card { display: grid; gap: 10px; margin: 0; }
.prod-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.prod-items { display: grid; gap: 8px; }
.prod-card .small svg { width: 14px; height: 14px; vertical-align: -2px; }
.prod-card > .btn { justify-self: start; }
.pickup-input { font-size: 24px; letter-spacing: .3em; text-transform: uppercase; text-align: center; font-weight: 700; }
.timeline li.skip { opacity: .45; text-decoration: line-through; }
.notif-btn .notif-count { background: var(--red); color: #fff; }
.notif-panel { width: min(380px, calc(100vw - 24px)); max-height: min(520px, 70vh); overflow-y: auto; padding: 4px 0; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid var(--line); }
.np-head button { color: var(--blue); font-size: 13px; font-weight: 600; }
.menu .np-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 0; white-space: normal; color: var(--text-2); }
.menu .np-item.unread { background: var(--blue-soft); color: var(--text); }
.np-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-4); color: var(--text-2); }
.np-ic svg { width: 15px; height: 15px; }
.np-ic.approve, .np-ic.sale, .np-ic.payout { background: rgba(60, 207, 145, .14); color: var(--green); }
.np-ic.reject { background: rgba(255, 95, 109, .12); color: var(--red); }
.np-ic.comment, .np-ic.reply, .np-ic.follow, .np-ic.order { background: var(--blue-soft); color: var(--blue); }
.np-body { display: grid; gap: 2px; min-width: 0; }
.np-text { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.np-body small { color: var(--text-3); font-size: 12px; }
.np-empty { padding: 16px 14px; }

a.store-map { gap: 6px; align-content: center; font-size: 13px; font-weight: 600; }
a.store-map:hover span { text-decoration: underline; }

/* ---------- รีวิวจากผู้ซื้อ (★) ---------- */
.stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; color: var(--line-2); letter-spacing: 0; }
.stars i { font-style: normal; }
.stars i.on { color: var(--amber); }
.stars i.half { background: linear-gradient(90deg, var(--amber) 50%, var(--line-2) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars.sm { font-size: 13px; }
.rv-sum { display: inline-flex; align-items: center; gap: 6px; margin: -2px 0 8px; color: var(--text-2); font-size: 13px; }
.rv-sum:hover span { color: var(--text); text-decoration: underline; }
.tile-end { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tile-rate { color: var(--amber); font-weight: 600; font-size: 12px; }
.reviews { margin-top: 8px; }
.reviews .sec-title { display: flex; align-items: baseline; gap: 8px; }
#rvBody { display: grid; gap: 16px; }
.rv-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.rv-avg { display: grid; justify-items: center; gap: 4px; }
.rv-avg b { font-size: 38px; line-height: 1; color: var(--text); }
.rv-avg small { color: var(--text-3); font-size: 12.5px; }
.rv-dist { display: grid; gap: 4px; max-width: 340px; }
.rv-dist div { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.rv-dist i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--amber) var(--w), var(--bg-4) var(--w)); }
.rv-item { display: flex; gap: 10px; align-items: flex-start; }
.rv-main { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.rv-main .cm-body { margin: 2px 0 0; }
.rv-main .pill-ok { margin: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; }
.rv-main .pill-ok svg { width: 11px; height: 11px; }
.rv-reply { width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); border-left: 3px solid var(--blue); font-size: 14px; }
.rv-reply b { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 12.5px; }
.rv-reply b svg { width: 14px; height: 14px; color: var(--blue); }
.rv-reply p { margin: 4px 0 0; color: var(--text-2); }
.rv-mine { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--blue); background: var(--blue-soft); }
.rv-form { display: grid; gap: 10px; margin: 0; }
.rv-form textarea { resize: vertical; }
.rv-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rv-stars label { cursor: pointer; font-size: 30px; line-height: 1; color: var(--line-2); transition: color .12s; }
.rv-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rv-stars label:hover, .rv-stars label:hover ~ label, .rv-stars label:has(input:checked), .rv-stars label:has(input:checked) ~ label { color: var(--amber); }
.rv-stars label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.rv-note { display: flex; align-items: center; gap: 8px; margin: 0; }
.rv-note svg, .rv-link svg { width: 14px; height: 14px; color: var(--amber); flex: none; }
.rv-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
#rvBody .cm-empty { margin: 0; }
@media (max-width: 560px) { .rv-summary { grid-template-columns: 1fr; justify-items: center; gap: 12px; } .rv-dist { width: 100%; } }

/* ---------- บัญชีของฉัน ---------- */
.account .card-title svg { width: 20px; height: 20px; }
.acc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.acc-head > div { display: grid; gap: 2px; min-width: 0; }
.acc-head b { color: var(--text); font-size: 16px; }
.acc-head small { color: var(--text-3); overflow-wrap: anywhere; }
.acc-head .menu-badges { margin-top: 4px; }
.inline-field { display: flex; gap: 8px; }
.inline-field .input { flex: 1; min-width: 0; }
.inline-field .btn { flex: none; }
.account .green { margin-left: 4px; }
.acc-acts { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.acc-acts li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.acc-acts li svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.acc-acts li span { flex: 1; }
.danger-zone { border-color: rgba(255, 95, 109, .35); }
.danger-zone .card-title svg { color: var(--red); }
.btn.danger, .btn-ghost.danger { color: var(--danger-text); }
.code-input { font-variant-numeric: tabular-nums; letter-spacing: .18em; font-size: 18px; text-align: center; max-width: 220px; }
.code-input.lg { max-width: none; font-size: 26px; padding-block: 12px; }
.inline-field .code-input { max-width: 180px; }
.tfa-steps { display: grid; gap: 18px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: step; }
.tfa-steps li { position: relative; display: grid; gap: 8px; justify-items: start; padding-left: 36px; counter-increment: step; }
.tfa-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 700; }
#suspendForm select + .lbl, #secureForm .lbl:not(:first-child), .account form .lbl:not(:first-child) { margin-top: 14px; }
.rc-meta div { align-content: start; }
.tfa-qr { padding: 10px; border-radius: 12px; background: #fff; line-height: 0; }
.tfa-qr .qr-svg { width: 200px; height: 200px; }
.tfa-key { padding: 6px 10px; border-radius: 8px; background: var(--bg-3); color: var(--text); font: 600 14px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; overflow-wrap: anywhere; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 12px 0 16px; padding: 14px 14px 14px 36px; border-radius: 12px; background: var(--bg-3);
  color: var(--text); font: 600 15px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; }
.tfa-done p { margin: 0 0 8px; }
.tfa-done .green, .account .card b.green { display: inline-flex; align-items: center; gap: 6px; }
.tfa-done svg, .account b.green svg { width: 16px; height: 16px; }

/* ---------- Admin: จัดการบัญชี · บันทึกระบบ · ยกเลิกคำสั่งซื้อ ---------- */
.sub-title { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 15px; color: var(--text); }
.sub-title svg { width: 16px; height: 16px; color: var(--text-3); }
.um-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.um-row > span { display: grid; gap: 2px; }
.um-row .btn { flex: none; }
.acc-cell, .row-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acc-cell .pill-ok, .acc-cell .role-pill { margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.acc-cell svg, .role-pill svg { width: 12px; height: 12px; }
.role-pill { vertical-align: middle; }
.audit-q { max-width: 260px; }
.audit-table td { font-size: 13px; vertical-align: top; }
.audit-act { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.audit-act svg { width: 14px; height: 14px; color: var(--text-3); }
.audit-act.suspend svg, .audit-act.account-delete svg, .audit-act.order-cancel svg, .audit-act.art-delete svg, .audit-act.post-delete svg { color: var(--red); }
.audit-act.approve svg, .audit-act.unsuspend svg { color: var(--green); }
.nowrap { white-space: nowrap; }
.status.cancelled { background: rgba(255, 95, 109, .12); color: var(--danger-text); }

/* ---------- ใบเสร็จ (เป็นกระดาษสีขาวเสมอ ไม่ตามธีม) ---------- */
.receipt { padding: 28px 28px 20px; border-radius: 14px; background: #fff; color: #222; box-shadow: 0 10px 40px var(--shadow); font-size: 14px; }
.receipt b { color: #111; }
.rc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid #111; }
.rc-head .logo-mark { width: 44px; height: 44px; }
.rc-brand { display: grid; gap: 1px; }
.rc-brand small, .rc-title small, .rc-meta small, .rc-table small { color: #666; font-size: 12px; }
.rc-title { text-align: right; }
.rc-title h1 { margin: 0; font-size: 22px; color: #111; }
.rc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 18px 0; }
.rc-meta div { display: grid; gap: 1px; }
.rc-meta span { color: #666; font-size: 12px; }
.rc-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.rc-table th { padding: 8px 6px; border-bottom: 1px solid #ccc; color: #555; font-size: 12px; font-weight: 600; text-align: left; }
.rc-table td { padding: 10px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.rc-table td small { display: block; margin-top: 2px; }
.rc-table .num { text-align: right; white-space: nowrap; }
.rc-table tfoot td { border-bottom: 0; padding-top: 12px; font-size: 15px; }
.rc-pay { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #f3f4f6; }
.rc-note { margin: 10px 0 0; color: #666; font-size: 12.5px; }
.rc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed #bbb; color: #777; font-size: 12px; }
@media (max-width: 560px) {
  .receipt { padding: 20px 16px 16px; }
  .rc-head { grid-template-columns: auto minmax(0, 1fr); }
  .rc-title { grid-column: 1 / -1; text-align: left; }
  .rc-meta { grid-template-columns: 1fr; }
}
@media print { /* พิมพ์เฉพาะใบเสร็จ / ใบรับรอง: ซ่อนหัวเว็บ เมนู และส่วนอื่น */
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  body:has(.receipt, .certificate) > *:not(#page) { display: none !important; }
  body:has(.receipt, .certificate) .page { position: static; overflow: visible; background: #fff; animation: none; }
  .page:has(.receipt, .certificate) .page-head, .page:has(.certificate) .cert-lookup, .no-print { display: none !important; }
  .page:has(.receipt, .certificate) .wrap { max-width: none; margin: 0; padding: 0; }
  .receipt { box-shadow: none; padding: 0; border-radius: 0; }
  .certificate { box-shadow: none; }
}
.acc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.acc-meta .green { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.acc-meta svg { width: 14px; height: 14px; }

/* ---------- เปิดรับศิลปิน (#/exhibit) ---------- */
.exhibit { padding-bottom: 60px; }
.ex-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 36px 0 28px; }
.ex-hero .eyebrow { color: var(--blue); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ex-hero h1 { margin: 8px 0 12px; font-size: clamp(30px, 5.4vw, 48px); line-height: 1.15; letter-spacing: -.01em; }
.ex-accent { background: linear-gradient(90deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-where { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--text); font-weight: 600; }
.ex-where svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.ex-lead { margin: 0; color: var(--text-2); font-size: 16.5px; line-height: 1.65; }
.ex-hero .cta-row { margin-top: 22px; }
.ex-collage { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 64px; gap: 10px; }
.ex-tile { position: relative; overflow: hidden; border-radius: 14px; background: var(--ph, var(--bg-3)); box-shadow: 0 10px 30px var(--shadow); }
.ex-tile img { width: 100%; height: 100%; object-fit: cover; }
.ex-tile.t0 { grid-column: 1 / 4; grid-row: 1 / 5; }
.ex-tile.t1 { grid-column: 4 / 7; grid-row: 1 / 3; }
.ex-tile.t2 { grid-column: 4 / 6; grid-row: 3 / 6; }
.ex-tile.t3 { grid-column: 6 / 7; grid-row: 3 / 6; }
.ex-tile.t4 { grid-column: 1 / 4; grid-row: 5 / 6; }
.ex-ic { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.ex-ic svg { width: 18px; height: 18px; }
.ex-ic.line { background: #06c755; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: -.02em; }
.ex-ic.line.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 7.5px; }
.ex-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 8px 0 0; padding: 18px 20px; list-style: none; }
.ex-points li { display: flex; gap: 12px; align-items: flex-start; }
.ex-points li > span:last-child { display: grid; gap: 2px; }
.ex-points b { color: var(--text); }
.ex-points small { color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.ex-step-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.ex-step-ic svg { width: 20px; height: 20px; }
.ex-h2 { display: grid; gap: 4px; margin: 56px 0 22px; font-size: clamp(22px, 3.4vw, 30px); text-align: center; }
.ex-h2 small { color: var(--text-3); font-size: 15px; font-weight: 500; }
.journey { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.jr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 28px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); }
.jr.flip .phone { order: 2; }
.phone { justify-self: center; width: min(270px, 100%); margin: 0; padding: 9px; border-radius: 38px; background: #0d0d10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 50px var(--shadow); }
.phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.jr-text { display: grid; gap: 10px; justify-items: start; max-width: 460px; }
.jr.flip .jr-text { justify-self: end; }
.jr-num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--blue); color: var(--blue-ink); font-size: 22px; font-weight: 700; }
.jr-who { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--blue-soft); color: var(--blue); }
.jr-who.buyer { background: rgba(60, 207, 145, .14); color: var(--green); }
.jr-who.both { background: rgba(244, 183, 64, .15); color: var(--amber); }
.jr-who svg { width: 15px; height: 15px; }
.jr-text h3 { margin: 0; font-size: clamp(21px, 2.8vw, 27px); line-height: 1.3; }
.jr-text p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.7; }
.ex-final { display: grid; gap: 12px; justify-items: center; margin-top: 40px; padding: 32px 24px; text-align: center; background: linear-gradient(135deg, var(--blue-soft), rgba(185, 163, 240, .12)); }
.ex-final h2 { margin: 0; font-size: 24px; }
.ex-final p { margin: 0; }
.ex-final .ex-contacts { width: 100%; margin-top: 8px; text-align: left; }
.ex-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.ex-contacts a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); }
.ex-contacts a:hover { border-color: var(--blue); }
.ex-contacts span:last-child { display: grid; min-width: 0; }
.ex-contacts b { overflow-wrap: anywhere; }
.ex-contacts small { color: var(--text-3); font-size: 12.5px; }
.ex-links { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
@media (max-width: 860px) {
  .ex-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .ex-collage { grid-auto-rows: 44px; }
  .jr, .jr.flip { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }
  .jr .phone, .jr.flip .phone { order: 2; width: min(250px, 72vw); }
  .jr-text, .jr.flip .jr-text { justify-self: stretch; max-width: none; }
  .ex-hero .cta-row .btn, .jr-text .cta-row .btn, .ex-final .cta-row .btn { flex: 1 1 auto; }
  .ex-h2 { margin-top: 40px; }
}
/* ---------- แถบแนะนำหน้าแรก ---------- */
.hello { padding: 0 12px 12px; }
.hello-in { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 12px 14px; border-radius: 14px; background: var(--blue-soft); border: 1px solid rgba(45, 179, 245, .35); }
.hello-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--blue); color: var(--blue-ink); }
.hello-ic svg { width: 20px; height: 20px; }
.hello-in p { flex: 1; margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.hello-in b { color: var(--text); }
.hello-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.hello-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text-3); }
.hello-x:hover { background: var(--bg-3); color: var(--text); }
.hello-x svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .hello-in { flex-wrap: wrap; } .hello-in p { flex-basis: calc(100% - 52px); font-size: 13.5px; } .hello-acts { width: 100%; justify-content: space-between; } }
/* ---------- มือถือ: ขนาดปุ่มกดอย่างน้อย ~40px · ตัวกรองค้นหาไม่ล้นจอ ---------- */
.select-pill { position: relative; }
@media (max-width: 720px), (pointer: coarse) {
  .logo-mark.sm { width: 36px; height: 36px; }
  .menu .theme-seg button { width: 44px; height: 40px; }
  .stepper.sm button { width: 40px; height: 40px; }
  .ci-remove { padding: 10px; margin: -10px -10px 0 0; }
  .stat-link { min-height: 40px; }
}

/* ---------- วิธีการทำงาน (#/how) ---------- */
.how-hero { max-width: 760px; margin: 0 auto; padding: 18px 0 8px; text-align: center; }
.how-hero h1 { margin: 6px 0 10px; font-size: clamp(28px, 5vw, 44px); line-height: 1.2; }
.how-hero .ex-lead b { color: var(--text); }
.how-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; text-align: left; }
.how-pick { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--bg-2); border: 2px solid var(--line); color: var(--text-2); }
.how-pick b { display: block; color: var(--text); font-size: 16.5px; }
.how-pick small { color: var(--text-3); font-size: 13px; }
.how-pick:hover { border-color: var(--line-2); }
.how-pick.on { border-color: var(--blue); background: var(--blue-soft); }
.how-page .journey { margin-top: 28px; }
.how-cta { margin-top: 24px; }
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details { padding: 0 18px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0; color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; color: var(--blue); font-size: 22px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 16px; color: var(--text-2); line-height: 1.7; }
@media (max-width: 560px) { .how-picks { grid-template-columns: 1fr; } .how-hero { text-align: left; } }

/* ---------- ใบรับรองของแท้ ---------- */
.status-banner.ok { background: rgba(60, 207, 145, .1); border-color: rgba(60, 207, 145, .4); color: var(--green); }
.status-banner.ok b, .status-banner.rejected b { color: inherit; }
.item-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.cert-link { display: inline-flex; align-items: center; gap: 4px; }
.cert-link svg { width: 14px; height: 14px; }
.cert-link.void { color: var(--danger-text); }
.certificate { position: relative; overflow: hidden; margin: 0 0 18px; padding: 30px 30px 24px; border-radius: 16px; background: #fffdf8; color: #222;
  box-shadow: 0 12px 40px var(--shadow); border: 10px solid #efe8d8; outline: 1px solid #d8ccb0; outline-offset: -16px; }
.certificate b, .certificate h1, .certificate h2 { color: #111; }
.ct-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 2px solid #111; }
.ct-head .logo-mark { width: 44px; height: 44px; }
.ct-head > div:nth-child(2) { display: grid; }
.ct-head small { color: #777; font-size: 12px; }
.ct-title { text-align: right; }
.ct-title small { display: block; color: #9a7b3c; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ct-title h1 { margin: 2px 0 0; font-size: 24px; }
.ct-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; }
.ct-pic img { display: block; width: 100%; height: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); background: #ddd; }
.ct-info h2 { margin: 0; font-size: 26px; line-height: 1.25; }
.ct-by { margin: 4px 0 14px; color: #555; }
.ct-by a { color: #0369a1; }
.ct-info dl { display: grid; gap: 8px; margin: 0; }
.ct-info dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.ct-info dt { color: #777; font-size: 13px; }
.ct-info dd { margin: 0; color: #222; font-size: 14.5px; }
.ct-info dd a { color: #0369a1; }
.ct-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; padding-top: 16px; border-top: 1px dashed #bbb; }
.ct-sha { display: grid; gap: 6px; }
.ct-sha span { color: #777; font-size: 12px; font-weight: 600; }
.ct-sha code { padding: 8px 10px; border-radius: 8px; background: #f1ede3; color: #333; font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; overflow-wrap: anywhere; }
.ct-sha small { color: #777; font-size: 12px; line-height: 1.5; }
.ct-qr { display: grid; justify-items: center; gap: 4px; }
.ct-qr .qr-svg { width: 110px; height: 110px; }
.ct-qr small { color: #777; font-size: 10.5px; }
.ct-void { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-16deg); padding: 6px 22px; border: 4px solid #e11d48; border-radius: 10px;
  color: #e11d48; font-size: 40px; font-weight: 800; letter-spacing: .1em; opacity: .7; white-space: nowrap; }
.certificate.void { filter: grayscale(.4); }
.cert-check .btn { margin-top: 6px; }
.cert-result { margin-top: 12px; }
.cert-result .status-banner { margin: 0; }
.cert-lookup .inline-field .input { text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 600px) {
  .certificate { padding: 20px 16px 18px; border-width: 6px; outline-offset: -11px; }
  .ct-head { grid-template-columns: auto minmax(0, 1fr); }
  .ct-title { grid-column: 1 / -1; text-align: left; }
  .ct-body { grid-template-columns: 1fr; }
  .ct-pic { max-width: 220px; }
  .ct-info dl div { grid-template-columns: 1fr; gap: 0; }
  .ct-foot { grid-template-columns: 1fr; justify-items: start; }
}

/* ---------- Admin: ระบบ · พื้นที่ดิสก์ ---------- */
.disk-alert { align-items: center; }
.disk-alert > span { flex: 1; }
.disk-alert .btn { flex: none; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.sys-grid .card { margin: 0; }
.disk-card { display: grid; gap: 12px; }
.disk-head { display: flex; align-items: center; gap: 10px; }
.disk-head .card-title { margin: 0; flex: 1; }
.disk-level { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: rgba(60, 207, 145, .14); color: var(--green); }
.disk-level.warning { background: rgba(244, 183, 64, .16); color: var(--amber); }
.disk-level.critical { background: rgba(255, 95, 109, .14); color: var(--danger-text); }
.disk-bar { height: 14px; border-radius: 99px; background: var(--bg-4); overflow: hidden; }
.disk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.disk-card.warning .disk-bar i { background: var(--amber); }
.disk-card.critical .disk-bar i { background: var(--red); }
.disk-card.warning { border-color: rgba(244, 183, 64, .45); }
.disk-card.critical { border-color: rgba(255, 95, 109, .5); }
.disk-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.disk-nums div { display: grid; gap: 1px; }
.disk-nums span { color: var(--text-3); font-size: 12.5px; }
.disk-nums b { color: var(--text); font-size: 19px; }
.disk-nums small { color: var(--text-3); font-size: 12px; }
.disk-card .btn { justify-self: start; }
.admin .disk-card { margin-top: 16px; }
.sys-rules, .sys-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.sys-rules li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); }
.sys-tips { padding-left: 18px; list-style: disc; color: var(--text-2); }
.sys-parts { display: grid; margin: 0 0 8px; padding: 0; list-style: none; }
.sys-parts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sys-parts li:last-child { border-bottom: 0; }
.sys-parts li > span:first-child { display: grid; min-width: 0; }
.sys-parts b { color: var(--text); font-size: 14px; font-weight: 500; }
.sys-parts small { color: var(--text-3); font-size: 12px; }
.sys-parts .num { flex: none; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- หน้า SEO: หมวด · มหาวิทยาลัย · คู่มือ ---------- */
.seo-page .intro { margin-bottom: 18px; }
.seo-fit { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--text-2); font-size: 15px; }
.seo-fit svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.seo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.seo-chips .chip { display: inline-flex; align-items: center; }
.seo-grid { margin: 0 -16px; }
.seo-artists { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.seo-artist { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); }
.seo-artist span { display: grid; }
.seo-artist b { color: var(--text); font-size: 14px; }
.seo-artist small { color: var(--text-3); font-size: 12px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.guide-card { display: grid; overflow: hidden; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); }
.guide-card:hover { border-color: var(--line-2); }
.guide-pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ph, var(--bg-3)); }
.guide-pic img { width: 100%; height: 100%; object-fit: cover; }
.guide-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.guide-body b { color: var(--text); font-size: 16.5px; line-height: 1.4; }
.guide-body small { font-size: 13.5px; line-height: 1.55; }
.guide article h1 { margin: 6px 0 10px; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.25; }
.guide-lead { margin: 0 0 18px; color: var(--text-2); font-size: 17px; line-height: 1.7; }
.guide article h2 { margin: 30px 0 10px; font-size: 21px; }
.guide article p, .guide article li { color: var(--text-body); font-size: 16px; line-height: 1.8; }
.guide article ul { padding-left: 22px; }
.guide-tip { display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--blue-soft); border: 1px solid rgba(45, 179, 245, .3); }
.guide-tip svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--blue); }
.guide-arts { margin: 26px 0 8px; }
.guide-arts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.guide-arts-head b { color: var(--text); }
.guide-cta { margin-top: 28px; }
.share-grid { grid-template-columns: repeat(4, 1fr); }
.share-opt.pin b { background: #e60023; }

/* ---------- ผู้เข้าชมเว็บ (Admin → สถิติ) ---------- */
.hbars { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hbars li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; overflow: hidden; }
.hbars li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--blue) 14%, transparent); border-radius: 10px; }
.hbars li > * { position: relative; }
.hbars .hb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .hb-name small { margin-left: 6px; color: var(--muted); }
.hbars b { font-variant-numeric: tabular-nums; }
.hbars .unit { color: var(--muted); font-size: 12px; }
.kpi b.kpi-sm { font-size: 22px; }
.visits-table td small { font-size: 12px; }