:root{
  --bg:#f2f7fe;--bg2:#e3eefd;--ink:#0a1a33;--muted:#4f6690;--card:#fff;--line:#0a1a3318;
  --accent:#1f6fe8;--accent-text:#1558c9;--accent-ink:#fff;--accent-soft:#1f6fe81a;--ring:#7db3ff;
  --shadow:0 1px 2px #0a1a3314,0 8px 24px -8px #1f6fe833;--shadow-hover:0 2px 4px #0a1a3314,0 22px 40px -14px #1f6fe880;--scrim:#0a1a33cc;--clip-a:#0f4fc4;--clip-b:#2b6fe0;--on-clip:#fff;--nav-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
  font-family:'Noto Sans Thai',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#07101f;--bg2:#0b1b38;--ink:#e8f1ff;--muted:#9bb2d6;--card:#0e1c36;--line:#e8f1ff1f;
  --accent:#4b8dff;--accent-text:#6c9fff;--accent-ink:#04122b;--accent-soft:#4b8dff26;--ring:#4b8dff;
  --shadow:0 1px 2px #0008,0 10px 28px -10px #000a;--shadow-hover:0 2px 4px #0008,0 22px 40px -14px #000c;--scrim:#04122bcc;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--muted) transparent}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:clip}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.ico{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.light{font-weight:300}.bold{font-weight:800}
h1,h2,h3{font-family:'Prompt','Noto Sans Thai',sans-serif;text-wrap:balance}

.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;height:var(--nav-h);padding:0 clamp(16px,4vw,48px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500}.logo{font-family:'Prompt',sans-serif;font-weight:600;display:flex;gap:8px;align-items:center}
.logo .ico{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#f4f3ee}
main{padding:0 clamp(16px,4vw,48px)}

/* ---- โปรไฟล์ ---- */
.profile{position:relative;max-width:1200px;margin:0 auto;padding:clamp(16px,4vh,36px) 0 20px;display:flex;gap:clamp(18px,4vw,36px);align-items:center}
.profile::before{content:"";position:absolute;inset:-80px -50vw auto;height:420px;z-index:-1;background:radial-gradient(60% 100% at 30% 0,var(--bg2),transparent 70%)}
.avatar{flex:none;width:clamp(100px,22vw,160px);aspect-ratio:1;border-radius:50%;background:var(--bg2) center/cover;display:grid;place-items:center;font:600 3rem 'Prompt',sans-serif;color:var(--accent);box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--ring)}
.pinfo{min-width:0}
.pinfo h1{margin:0;font-size:clamp(1.35rem,4vw,2.1rem);line-height:1.2;font-weight:600}
.phandle{font:400 .9rem 'Noto Sans Thai',sans-serif;color:var(--muted);margin-left:10px}
.phandle::before{content:"@"}.phandle:empty{display:none}
.pbtns{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.pbtns .btn{margin-top:0}
.pbio{margin:8px 0;color:var(--muted);max-width:60ch}

/* ---- เนื้อหา ---- */
.lib{max-width:1200px;margin:0 auto;padding-bottom:60px}
h2{font-size:clamp(1.4rem,3vw,1.8rem);margin:36px 0 16px;font-weight:600}
#shelves>h2:first-child{margin-top:20px}
.vtitle{font-size:clamp(1.3rem,3.5vw,1.8rem);margin:16px 0}
h2 .bold{font-weight:600}h2 .light{font-weight:500;color:var(--muted)}
h2 small{font-size:.9rem;color:var(--muted);font-weight:400;margin-left:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{box-shadow:var(--shadow-hover)}
.verdict{margin:0;font-size:.9rem;color:var(--ink);line-height:1.5}
.pimg{overflow:hidden;aspect-ratio:1;background:var(--bg2)}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.noimg{width:100%;height:100%;display:grid;place-items:center;font-size:3rem;color:var(--accent)}
.pbody{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.pbody h3{margin:0;font-size:1rem;font-weight:500;line-height:1.4}
.chip{align-self:flex-start;font-size:.72rem;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.price{margin:0;font:600 1.15rem 'Prompt',sans-serif;color:var(--accent-text);font-variant-numeric:tabular-nums}
.from{display:inline-flex;align-items:flex-start;gap:6px;padding:8px 0;line-height:1.4;min-height:44px;font-size:.85rem;color:var(--muted);text-decoration:none}.from:hover{color:var(--accent-text)}
.btn,.more{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:44px;margin-top:auto;padding:0 20px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:600 .9rem 'Noto Sans Thai',sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),filter .2s,background .2s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--accent-soft);color:var(--accent-text)}
.more{display:flex;margin:24px auto 0;background:transparent;color:var(--ink);border:1px solid var(--line)}
.more:hover{background:var(--accent-soft)}.more[hidden]{display:none}
.clips-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.clip{position:relative;scroll-snap-align:start;aspect-ratio:9/16;padding:14px;border-radius:20px;color:var(--on-clip);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,var(--clip-a),var(--clip-b)) center/cover;overflow:hidden;transition:transform .35s var(--ease)}
.clip::after{content:"";position:absolute;inset:auto 0 0;height:70%;background:linear-gradient(transparent,#050c1ce6 55%,#050c1cf2);pointer-events:none}
.clip>*{position:relative;z-index:1}
.clip h3{margin:6px 0 2px;font-size:.95rem;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.clip small{opacity:.85}
.clip-n{align-self:flex-start;font-size:.72rem;background:var(--scrim);padding:2px 10px;border-radius:999px}
.clip-play{position:absolute!important;top:50%;left:50%;width:48px;height:48px;margin:-30px 0 0 -24px;display:grid;place-items:center;border-radius:50%;background:#ffffff33;backdrop-filter:blur(6px)}
.clip-play .ico{fill:currentColor;stroke:none;width:22px;height:22px;margin-left:2px}
.searchbar{position:relative;max-width:560px;margin:8px 0 4px}
.searchbar .ico{position:absolute;left:16px;top:50%;margin-top:-.55em;color:var(--muted)}
.searchbar input{width:100%;min-height:48px;padding:0 20px 0 44px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:inherit;font:inherit}
.searchbar input::placeholder{color:var(--muted)}
.rhead small{font-size:.9rem;color:var(--muted);font-weight:400}
.toolbar{position:sticky;top:var(--nav-h);z-index:30;display:flex;gap:8px;align-items:center;padding:8px;margin-bottom:16px;border-radius:999px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.segs{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none}
.seg{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 .85rem 'Noto Sans Thai',sans-serif;cursor:pointer;transition:background .2s,color .2s}
.seg:hover{color:var(--ink)}.seg.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
select{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:inherit;font:inherit;accent-color:var(--accent)}
.navr{display:flex;align-items:center;gap:16px}
.langbtn{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.langbtn button{position:relative;padding:4px 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 .75rem 'Noto Sans Thai',sans-serif;cursor:pointer;transition:background .2s,color .2s}
.langbtn button::after{content:"";position:absolute;inset:-9px -4px}
.langbtn .on{background:var(--accent);color:var(--accent-ink)}
@keyframes shimmer{to{background-position:-200% 0}}
.skel{aspect-ratio:3/4;border-radius:20px;border:1px solid var(--line);background:linear-gradient(100deg,var(--card) 30%,var(--bg2) 50%,var(--card) 70%) 0 0/200% 100%}
.state{grid-column:1/-1;display:grid;justify-items:center;gap:12px;padding:32px 16px;text-align:center;color:var(--muted)}
.state p{margin:0}.state .btn{margin-top:0}
footer{text-align:center;padding:30px;color:var(--muted);font-size:.8rem}

/* ---- motion: เฉพาะเมื่อผู้ใช้ไม่ได้ลดการเคลื่อนไหว ---- */
@media (prefers-reduced-motion:no-preference){
  main,footer{transition:opacity .14s ease}
  .swapping main,.swapping footer{opacity:0}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
  @keyframes pop{from{opacity:0;transform:scale(.86)}}
  /* ใช้เมื่อโหลด Motion ไม่ได้ (ไม่มีคลาส .motion) */
  html:not(.motion) .avatar{animation:pop .7s var(--ease) both}
  html:not(.motion) .pinfo>*{animation:rise .7s var(--ease) both}
  html:not(.motion) .pinfo>:nth-child(2){animation-delay:.12s}
    html:not(.motion) .pinfo>:nth-child(n+4){animation-delay:.28s}
  html:not(.motion) .pcard.enter{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*55ms + .2s)}
  .pcard:hover .pimg img{transform:scale(1.06)}
  .clip:hover{transform:translateY(-3px)}
  .skel{animation:shimmer 1.4s linear infinite}
  /* Motion: ซ่อนไว้ก่อนเข้าฉาก (ถ้า JS ล้มเหลวคลาส .motion จะไม่ถูกเพิ่ม เนื้อหาจึงไม่หาย) */
  .motion .pre{opacity:0}
  .motion .w{display:inline-block;white-space:pre}
}
#progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (prefers-reduced-motion:reduce){#progress{display:none}}

@media(max-width:640px){
  .avatar{width:96px;font-size:2.2rem}
  .profile{flex-direction:column;text-align:center}.pbtns{justify-content:center}.pbio{margin-inline:auto}
  .toolbar{flex-wrap:wrap;border-radius:20px}.segs{flex:1 1 100%;order:3}
  .clips-row{grid-auto-columns:minmax(140px,44%)}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.from .ico{flex:none;margin-top:.2em}