/* ============================================================
   ฟีด — โพสต์ · แถวคนออนไลน์ · เธรด
   ทุกสีมาจาก token ของธีมที่ผู้ใช้เลือก
   ============================================================ */

/* ---------- หัวจอ ---------- */
.fd-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0 2px;
}
.fd-title { font-size: var(--fs-page); font-weight: 800; letter-spacing: -.034em; margin: 0; }
.fd-people {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fd-people svg { width: 19px; height: 19px; }
.fd-people:active { transform: scale(.94); }

/* ---------- แถบขอบเขต ---------- */
.fd-scopes { display: flex; gap: 6px; margin-top: 10px; }
.fd-scope {
  flex: 1 1 0;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: 7px 6px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fd-scope:active { transform: scale(.97); }
.fd-scope.on { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }

/* ---------- แถวคนออนไลน์ ---------- */
/* วงกลมแบบสตอรี่ แต่ข้างในเป็นคนที่เปิดแอปอยู่จริงตอนนี้ ไม่ใช่รูปที่โพสต์ค้างไว้
   วงแหวนเรืองแสง = กำลังนั่งทำงานอยู่ (มาจาก runningWork ของเครื่องเขา) */
.fd-online {
  display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  margin-top: 14px; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.fd-online::-webkit-scrollbar { display: none; }
.fd-on { flex: none; width: 60px; text-align: center; }
.fd-on-ring {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); color: var(--muted);
  font-size: 20px; font-weight: 700;
  border: 2px solid var(--line);
  overflow: hidden;
}
.fd-on-ring img { width: 100%; height: 100%; object-fit: cover; }
.fd-on.busy .fd-on-ring {
  border-color: var(--good);
  box-shadow: 0 0 0 3px var(--good-soft), 0 0 14px -2px var(--good);
}
.fd-on-nm {
  font-size: 11px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-on-sub {
  font-size: 9.5px; color: var(--faint); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-on.busy .fd-on-sub { color: var(--good); font-weight: 600; }

/* ---------- ช่องเปิดเขียนโพสต์ ---------- */
.fd-ask {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); padding: 9px 12px;
  font-family: inherit; cursor: pointer; text-align: left;
}
.fd-ask:active { transform: scale(.99); }
.fd-ask-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.fd-ask-tx { flex: 1; min-width: 0; color: var(--faint); font-size: 14px; }
.fd-ask-cam { color: var(--blue); display: flex; }
.fd-ask-cam svg { width: 19px; height: 19px; }

/* ---------- ปุ่มมีโพสต์ใหม่ ---------- */
/* โพสต์ใหม่ไม่แทรกเข้ากลางหน้าที่กำลังอ่าน — ของที่ขยับเองใต้นิ้วคือของน่ารำคาญ */
.fd-fresh {
  display: flex; align-items: center; gap: 6px; margin: 12px auto 0;
  border: 0; border-radius: 999px;
  background: var(--blue); color: var(--on-accent);
  padding: 8px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-brand);
}
.fd-fresh svg { width: 15px; height: 15px; }

/* ---------- การ์ดโพสต์ ---------- */
.fd-post {
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px;
  cursor: pointer;
}
.fd-post:active { transform: scale(.995); }
/* โพสต์ที่ถามวิชาที่เราเก่ง — นี่คือจุดที่ฟีดต่างจาก IG
   IG เรียงตามความนิยม เราเรียงตามว่าใครช่วยได้ และบอกเหตุผลไว้บนการ์ดเลย */
.fd-post.for-me { border-color: var(--good); background: var(--good-soft); }
.fd-flag {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--good);
  margin-bottom: 9px;
}
.fd-flag svg { width: 14px; height: 14px; }

.fd-head { display: flex; align-items: center; gap: 10px; }
.fd-av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  object-fit: cover;
}
.fd-av.sm { width: 30px; height: 30px; font-size: 13px; }
.fd-av.anon { background: var(--card2); color: var(--faint); }
.fd-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fd-who b { font-size: 14.5px; font-weight: 700; }
.fd-who i {
  font-style: normal; font-size: 11.5px; color: var(--faint);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.fd-mine {
  margin-left: 6px; font-size: 10px; font-weight: 700;
  color: var(--blue); background: var(--blue-soft);
  border-radius: 999px; padding: 1px 7px;
}
.fd-subj { color: var(--blue); font-weight: 700; }

.fd-body {
  margin: 10px 0 0; font-size: 14.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.fd-img {
  width: 100%; margin-top: 10px; border-radius: var(--r-tile);
  border: 1px solid var(--line); display: block;
  max-height: 380px; object-fit: cover;
}
.fd-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fd-reply {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.fd-reply svg { width: 15px; height: 15px; }
.fd-wait {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; color: var(--warn);
  background: var(--warn-soft); border-radius: 999px; padding: 2px 9px;
}

/* ============================================================
   จอเขียนโพสต์ + จอเธรด
   ============================================================ */
#scr-compose .scr-body, #scr-post .scr-body {
  display: flex; flex-direction: column;
  position: absolute; inset: 0; padding: 0;
}
#composeBody, #postBody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.compose-mode .tabbar { display: none; }

.cp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--card);
}
.cp-top > b { font-size: 15.5px; font-weight: 700; }
.cp-x, .cp-send {
  border: 0; background: none; font-family: inherit; font-size: 14px; cursor: pointer;
  padding: 6px 2px;
}
.cp-x { color: var(--muted); display: flex; align-items: center; }
.cp-x svg { width: 20px; height: 20px; transform: rotate(180deg); }
.cp-send { color: var(--blue); font-weight: 700; }
.cp-send:disabled { color: var(--faint); }

.cp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.cp-body textarea {
  width: 100%; background: var(--card2);
  border: 1.5px solid var(--line); border-radius: var(--r-tile);
  padding: 12px; color: var(--ink);
  font-family: inherit; font-size: 15px; line-height: 1.65; resize: vertical;
}
.cp-body textarea:focus { outline: none; border-color: var(--blue); background: var(--card); }
.cp-body textarea::placeholder { color: var(--faint); }

.cp-img { position: relative; margin-top: 10px; }
.cp-img img {
  width: 100%; border-radius: var(--r-tile); border: 1px solid var(--line); display: block;
}
.cp-img-x {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(10, 14, 26, .7); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cp-img-x svg { width: 15px; height: 15px; }

.cp-add {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  border: 1.5px dashed var(--line); border-radius: var(--r-tile);
  background: none; color: var(--muted);
  padding: 10px 14px; width: 100%;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.cp-add svg { width: 17px; height: 17px; }

.cp-lb {
  margin: 16px 0 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--muted);
}
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip {
  border: 1.5px solid var(--line); background: var(--card2); color: var(--muted);
  border-radius: 999px; padding: 6px 13px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cp-chip.on { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }

.cp-anon {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-tile); padding: 12px 14px; cursor: pointer;
}
.cp-anon input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--blue); }
.cp-anon span { display: flex; flex-direction: column; line-height: 1.45; }
.cp-anon b { font-size: 14px; font-weight: 700; }
.cp-anon i { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- เธรด ---------- */
.th-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.th-scroll .fd-post { cursor: default; margin-top: 0; }
.th-lb {
  margin: 18px 0 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--muted);
}
.th-reply { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.th-bd { flex: 1; min-width: 0; }
.th-bd b { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.th-bd b i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--faint); }
.th-bd p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; word-break: break-word; }

/* ปุ่มเพื่อนลอยมุมขวาบนของแอป (.top-friends) นั่งทับปุ่มบนหัวฟีดพอดี
   ฟีดมีทางเข้า "คนในห้อง" ของตัวเองอยู่แล้ว ปุ่มลอยจึงไม่ต้องมีในจอนี้ */
.mates-scr .top-friends { display: none; }

/* ============================================================
   ปรับรอบสอง — ให้อ่านเป็นโซเชียล ไม่ใช่แอปงาน
   ============================================================ */

/* ---------- จอกว้าง: ฟีดต้องเป็นคอลัมน์กลาง ไม่ใช่ยืดเต็มจอ ----------
   โหมดแถบซ้าย (iPad/PC) ทำให้กรอบแอปกว้างถึง 1080px · ฟีดที่ยืดเต็มความกว้างนั้น
   ทำให้บรรทัดยาวจนอ่านยาก และการ์ดแบน ๆ ใบใหญ่ ๆ อ่านเป็นตารางข้อมูล ไม่ใช่โพสต์
   ทุกแอปโซเชียลบนเดสก์ท็อปจึงบีบฟีดเป็นคอลัมน์แคบตรงกลางเหมือนกันหมด */
:root[data-nav="side"] #feedBody,
:root[data-nav="side"] #matesBody { max-width: 560px; margin: 0 auto; }
:root[data-nav="side"] .th-scroll > *,
:root[data-nav="side"] .cp-body > * { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- แถบขอบเขต: จากปุ่มเต็มความกว้าง เป็นแถบขีดใต้ ----------
   ปุ่มแคปซูลสามอันเรียงเต็มความกว้างอ่านเป็น "ตัวกรอง" ของแอปทำงาน
   แถบขีดใต้แบบ Threads อ่านเป็น "มุมมองของฟีด" ซึ่งคือสิ่งที่มันเป็นจริง ๆ */
.fd-scopes {
  gap: 0;
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
}
.fd-scope {
  flex: 1 1 0;
  border: 0; border-radius: 0;
  background: none;
  padding: 11px 4px 10px;
  font-size: 14px; font-weight: 600;
  position: relative;
  transition: color .15s ease;
}
.fd-scope::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2.5px;
  border-radius: 2px 2px 0 0; background: transparent;
  transition: background .18s ease;
}
.fd-scope.on { background: none; color: var(--ink); font-weight: 700; }
.fd-scope.on::after { background: var(--ink); }
.fd-scope:active { transform: none; opacity: .6; }

/* ---------- แท็บที่สี่: "เพื่อนฉัน" ----------
   สามอันแรกคือช่วงของฟีด อันนี้เป็นอีกมุมมองของจอ จึงคั่นด้วยเส้นตั้ง
   ไม่ให้อ่านรวมเป็นตัวกรองชุดเดียวกัน · แคบกว่าเพราะไม่ได้มีน้ำหนักเท่ากัน */
.fd-scope-fr {
  flex: 0 0 auto; padding-left: 14px; padding-right: 2px;
  margin-left: 10px; border-left: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 6px;
}
/* เลขคำขอที่รอตอบ — เดิมอยู่บนปุ่มที่พาไปหน้า "วิชาของฉัน" ซึ่งกดตอบไม่ได้ */
.fd-scope-n {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--alert); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.fd-scope-n[hidden] { display: none; }

/* หน้าเพื่อนตอนอยู่ในจอฟีด — .fr-body เคยพึ่ง flex ของ .scr-body ซึ่งไม่มีตรงนี้แล้ว */
#friendsBody.fr-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 0; }

/* ---------- หัวจอกระชับ ---------- */
.fd-title { font-size: 22px; font-weight: 800; }

/* ---------- การ์ดโพสต์: เส้นคั่นแทนกล่องลอย ----------
   กล่องมีขอบ+เงาเรียงต่อกันอ่านเป็นรายการการ์ด · ฟีดโซเชียลใช้เส้นคั่นบาง ๆ
   เพื่อให้ตาไหลลงเรื่อย ๆ ไม่ใช่หยุดอ่านทีละกล่อง */
.fd-post {
  margin-top: 0;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 16px 2px;
}
.fd-post:active { transform: none; background: var(--card2); }
/* ยกเว้นใบที่ "เราช่วยได้" — ใบนี้ต้องเด้งออกจากฟีด เพราะมันคือของที่ต้องการเรา */
.fd-post.for-me {
  border: 1.5px solid var(--good);
  border-radius: var(--r-card);
  background: var(--good-soft);
  padding: 14px;
  margin: 10px 0;
}
.fd-body { font-size: 15px; }

/* ---------- สถานะว่างที่ชวนลงมือ ---------- */
.fd-blank {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 48px 24px 32px; text-align: center;
}
.fd-blank-ic {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.fd-blank-ic svg { width: 26px; height: 26px; }
.fd-blank-h { margin: 0; font-size: 17px; font-weight: 700; }
.fd-blank-p {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted);
  max-width: 30ch;
}
.fd-blank-go {
  margin-top: 8px;
  border: 0; border-radius: 999px;
  background: var(--blue); color: var(--on-accent);
  padding: 11px 26px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-brand);
}
.fd-blank-alt {
  border: 0; background: none; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 4px;
}

/* ============================================================
   หน้าของคนคนหนึ่ง
   ============================================================ */
#scr-user .scr-body { display: flex; flex-direction: column; position: absolute; inset: 0; padding: 0; }
#userBody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.us-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 14px 28px; }
:root[data-nav="side"] .us-scroll > * { max-width: 560px; margin-left: auto; margin-right: auto; }

/* รูป/ชื่อในฟีดกดได้ — ต้องมีสัญญาณว่ากดได้ ไม่งั้นไม่มีใครลองกด */
.fd-head.tap { cursor: pointer; border-radius: 10px; margin: -4px; padding: 4px; }
.fd-head.tap:active { background: var(--card2); }
.fd-on { cursor: pointer; }
.th-reply[role="link"] { cursor: pointer; }

.us-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.us-av {
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 700;
  object-fit: cover;
  background: var(--card2); color: var(--muted);
}
.us-nm { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.us-live {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: var(--card2); border-radius: 999px; padding: 4px 12px;
}
.us-live.busy { color: var(--good); background: var(--good-soft); }
.us-live .rm-dot { background: currentColor; }
.us-bio {
  margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted);
  max-width: 34ch;
}

.us-why {
  margin-top: 18px; padding: 13px 15px;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 5px;
}

.us-subs { display: flex; gap: 12px; margin-top: 18px; }
.us-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.us-lb {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--muted);
}
/* ชิปบนหน้านี้เป็นป้ายอ่านอย่างเดียว ไม่ใช่ปุ่มให้กด — ตัดสัญญาณว่ากดได้ออก */
.us-subs .so-chip { cursor: default; }

.us-poke {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 20px;
  border: 0; border-radius: 999px;
  background: var(--blue); color: var(--on-accent);
  padding: 13px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-brand);
}
.us-poke svg { width: 18px; height: 18px; }
.us-poke:active { transform: scale(.98); }

.us-postlb { margin-top: 26px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }

/* ---------- ปุ่มเพิ่มเพื่อน + ทัก ---------- */
.us-acts { display: flex; gap: 8px; margin-top: 20px; }
/* .us-poke เดิมเป็นปุ่มเดี่ยวเต็มความกว้าง (width:100%) — พอมาอยู่ในแถวคู่กัน
   ต้องคืน width ให้ auto ด้วย ไม่งั้นมันกิน 100% ของแถวแล้วดันปุ่มอีกตัวล้นขอบจอ */
.us-acts .us-poke { margin-top: 0; flex: 0 0 auto; width: auto; padding: 13px 22px; }
.us-acts .us-friend, .us-acts .us-poke { white-space: nowrap; }
.us-friend {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid var(--blue); border-radius: 999px;
  background: var(--blue); color: var(--on-accent);
  padding: 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.us-friend svg { width: 18px; height: 18px; }
.us-friend:active { transform: scale(.98); }
/* รอเขาตอบ กับ เป็นเพื่อนแล้ว เป็นสถานะ ไม่ใช่การชักชวน — จึงไม่ควรเด่นเท่าปุ่มชวน */
.us-friend.wait {
  background: none; color: var(--muted); border-color: var(--line);
}
.us-friend.done {
  background: var(--good-soft); color: var(--good); border-color: transparent;
}

/* ---------- จุดแดงบนปุ่มคน ---------- */
.fd-people { position: relative; }
.fd-people.has-req::after {
  content: attr(data-n);
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--alert); color: #fff;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid var(--scr);
}

/* ---------- กล่องคำขอเป็นเพื่อน ---------- */
.fi-box {
  margin-top: 14px;
  background: var(--card); border: 1px solid var(--blue);
  border-radius: var(--r-card); padding: 13px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.fi-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--blue);
  margin-bottom: 5px;
}
.fi-h svg { width: 16px; height: 16px; }
.fi-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.fi-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fi-bd b { font-size: 14px; font-weight: 700; }
.fi-bd i { font-style: normal; font-size: 11.5px; color: var(--faint); }
.fi-yes {
  flex: none; border: 0; border-radius: 999px;
  background: var(--blue); color: var(--on-accent);
  padding: 7px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.fi-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fi-no svg { width: 14px; height: 14px; }

/* ============================================================
   1B51 "Soft" — ช่องเพื่อน
   ============================================================
   เจ้าของสั่งให้เน้นจอนี้เป็นพิเศษ · ภาพอ้างอิงเป็นแอปโซเชียลสามตัว
   โครงของเราตรงกับเขาอยู่แล้วทุกชิ้น (แถวคนออนไลน์ · ช่องเขียน · การ์ดโพสต์)
   ที่ขาดคือผิว — ของเราเป็นวงกลมเทากับกล่องขาวเส้นบาง ส่วนของเขามีวงแหวนไล่สี
   การ์ดลอย และรูปที่กินพื้นที่จริง
   ============================================================ */

/* ---- แถวคนออนไลน์ = วงแหวนแบบสตอรี่ ---- */
/* ภาพอ้างอิงทุกใบใช้วงแหวนไล่สีรอบรูป ไม่ใช่เส้นขอบสีเดียว
   วงแหวนคือสิ่งที่ทำให้แถวนี้อ่านว่า "คนที่กดเข้าไปดูได้" ไม่ใช่ "รายชื่อ" */
.fd-online { gap: 14px; margin-top: 18px; padding: 2px 0 4px; }
.fd-on { width: 64px; }
.fd-on-ring {
  width: 58px; height: 58px; margin-bottom: 7px;
  border: none; position: relative;
  background: var(--card2);
}
/* วงแหวนวาดด้วย box-shadow สองชั้น ไม่ใช่ ::before หรือ border
   ::before ใช้ไม่ได้เพราะ renderOnline ใส่สีพื้นของรูปมาเป็น inline style
   ทับพื้นหลังของ ::before ที่อยู่ข้างหลังจนมองไม่เห็น (บั๊กรอบแรกของบล็อกนี้)
   border ก็ใช้ไม่ได้เพราะมันกินพื้นที่รูปเข้าไป 3px ทุกด้าน
   box-shadow วาดนอกกล่องล้วน: ชั้นแรกเป็นสีพื้นจอ (ช่องว่าง) ชั้นสองคือวง */
.fd-on-ring {
  box-shadow: 0 0 0 2px var(--scr), 0 0 0 4.5px var(--blue),
              0 6px 16px -6px rgba(20, 45, 110, .3);
}
/* คนที่กำลังนั่งทำงานอยู่ได้วงเขียว — สีนี้แปลว่า "อยู่ตอนนี้จริง" ไม่ใช่ "เคยออนไลน์" */
.fd-on.busy .fd-on-ring {
  box-shadow: 0 0 0 2px var(--scr), 0 0 0 4.5px var(--good),
              0 6px 18px -5px rgba(18, 169, 122, .45);
}
.fd-on-nm { font-size: 11.5px; font-weight: 600; }

/* ---- ช่องเขียนโพสต์ ---- */
/* ภาพอ้างอิงทำเป็นการ์ดสี่เหลี่ยมมนที่มีแถวปุ่มข้างล่าง ไม่ใช่แคปซูลบรรทัดเดียว
   ของเรายังเป็นแคปซูลอยู่เพราะมันเปิดแผ่นเขียนเต็มจออยู่แล้ว การ์ดที่มีปุ่มปลอม
   สี่ปุ่มซึ่งกดแล้วเปิดแผ่นเดียวกันหมด คือของที่ดูเยอะแต่ไม่ได้ทำอะไรเพิ่ม
   แต่เอาความนุ่มมา: สูงขึ้น มุมมนขึ้น เงาแทนเส้นขอบ */
.fd-ask {
  margin-top: 16px; padding: 12px 14px; gap: 12px;
  border: none; border-radius: 22px;
}
.fd-ask-av { width: 34px; height: 34px; font-size: 15px;
  background: linear-gradient(145deg, var(--blue), var(--fill)); color: #fff; }
.fd-ask-tx { font-size: 14.5px; }
.fd-ask-cam {
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
}

/* ---- การ์ดโพสต์ ---- */
.fd-post { margin-top: 14px; padding: 16px; border: none; }
/* โพสต์ที่ถามวิชาที่เราเก่ง — เดิมทาพื้นเขียวทั้งใบ ซึ่งกลบรูปกับตัวหนังสือ
   เหลือแถบเขียวข้างเดียว: บอกได้เท่ากันโดยไม่แตะพื้นการ์ด */
.fd-post.for-me {
  background: var(--soft-card);
  box-shadow: var(--soft-shadow), inset 3px 0 0 var(--good);
}

/* ---- แถบบนกับตัวกรอง ---- */
.fd-top { padding-top: 4px; }
.fd-people {
  border-radius: 14px; border: none;
  background: var(--soft-card); box-shadow: var(--soft-shadow);
}
.fd-scopes { gap: 8px; margin-top: 14px; }
.fd-scope {
  border: none; border-radius: 999px; padding: 8px 15px;
  background: var(--soft-card); box-shadow: var(--soft-shadow);
  font-weight: 600;
}
.fd-scope.on {
  background: linear-gradient(140deg, var(--blue), var(--fill));
  color: #fff; box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .55);
}

/* ============================================================
   1B52 · จอ "เพื่อนฉัน" — แถวที่บอกว่าช่วยกันได้ตรงไหน
   ============================================================ */

/* ---- การ์ดตัวตนบนสุด ---- */
/* ของเดิมเป็นแถบเล็กล่างสุดใต้รายชื่อ ซึ่งอ่านเป็น "เพื่อนอีกคนที่ชื่อแปลก ๆ"
   ทั้งที่มันคือชื่อของเจ้าตัว — ของที่ต้องส่งให้เพื่อนไปค้นหา ต้องหาเจอทันที */
.fr-me-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; margin-bottom: 16px; border-radius: 22px;
  background: linear-gradient(140deg, var(--blue), var(--fill));
  box-shadow: 0 12px 30px -12px rgba(37, 99, 235, .55);
  color: #fff;
}
.fr-me-av {
  width: 44px; height: 44px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .22);
  font-size: 19px; font-weight: 700;
}
.fr-me-tx { flex: 1; min-width: 0; line-height: 1.35; }
.fr-me-tx i { font-style: normal; display: block; font-size: 11px; opacity: .82; }
.fr-me-tx b {
  display: block; font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-me-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  border: none; border-radius: 12px; padding: 8px 12px; cursor: pointer;
  background: #fff; color: var(--fill);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.fr-me-btn svg { width: 14px; height: 14px; }
.fr-me-card .fr-ic { color: rgba(255, 255, 255, .8); }

/* ---- แถวเพื่อน ---- */
.fr-card.big {
  display: block; padding: 13px 14px; border: none; border-radius: 20px;
  background: var(--soft-card); box-shadow: var(--soft-shadow);
}
.fr-top { display: flex; align-items: center; gap: 11px; }
/* วงเขียวรอบรูปเมื่อคนนั้นเปิดแอปอยู่ตอนนี้ — box-shadow ไม่ใช่ border
   ด้วยเหตุผลเดียวกับวงแหวนสตอรี่: renderFriends ใส่สีพื้นรูปมาเป็น inline style */
.fr-card.online .fr-av {
  box-shadow: 0 0 0 2px var(--scr), 0 0 0 4px var(--good);
}
.fr-live {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--good-soft); color: var(--good);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- บรรทัดจับคู่วิชา ---- */
/* สองทิศทางต้องแยกสีออกจากกัน — "เขาช่วยเราได้" กับ "เราช่วยเขาได้"
   เป็นคนละเรื่องกันสิ้นเชิง สีเดียวกันแปลว่าต้องอ่านทุกครั้งถึงจะรู้ว่าอันไหนคืออันไหน */
.fr-mt {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; padding: 8px 10px; border-radius: 13px;
  font-size: 12.5px; line-height: 1.4; color: var(--muted);
}
.fr-mt b { font-weight: 700; }
.fr-mt-ic { display: flex; flex: none; }
.fr-mt-ic svg { width: 14px; height: 14px; }
.fr-mt.in { background: var(--good-soft); color: var(--good); }
.fr-mt.out { background: var(--blue-soft); color: var(--blue); }
.fr-mt.flat { background: var(--card2); padding: 7px 10px; }
.fr-mt + .fr-mt { margin-top: 6px; }

/* ============================================================
   1B53 · ลดกรอบ เพิ่มเนื้อหา
   ============================================================
   เทียบกับ Instagram: เขาถึงเนื้อหาจริงภายใน ~90px จอเรามีกรอบห้าชั้น ~400px
   ก่อนเจอเพื่อนคนแรก — หัวจอ · ตัวกรองสี่ปุ่ม · การ์ดตัวตน · ช่องค้นหา · หัวข้อกลุ่ม
   ช่องว่างเรื่อง "UI ระดับโลก" อยู่ตรงนี้ ไม่ได้อยู่ที่ความสวยของแต่ละชิ้น
   ============================================================ */

/* ---- ตัวตนเป็นบรรทัดเดียว ---- */
/* 1B52 ทำเป็นการ์ดไล่สีใบใหญ่เพื่อแก้ปัญหา "หาไม่เจอ" ซึ่งแก้ถูกแต่แรงเกินไป
   ของที่ดังที่สุดบนจอกลายเป็นก้อนที่พูดถึงตัวเจ้าของเอง ไม่ใช่เพื่อนซึ่งเป็นเนื้อหาของจอ */
.fr-me-line {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: none; cursor: pointer; font-family: inherit; text-align: left;
  color: var(--muted);
}
.fr-me-line:active { background: var(--card2); }
.fr-me-at {
  flex: none; font-size: 14px; font-weight: 700; color: var(--blue);
  font-family: 'Outfit', ui-monospace, monospace;
}
.fr-me-hint {
  flex: 1; min-width: 0; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-me-line > svg { width: 15px; height: 15px; flex: none; opacity: .7; }
.fr-me-edit { flex: none; display: flex; opacity: .7; padding: 2px; }
.fr-me-edit svg { width: 15px; height: 15px; }

/* ---- แถวเพื่อนแน่นขึ้น ---- */
/* ของเดิม padding 13px รอบด้านสำหรับเนื้อหาบรรทัดเดียว = การ์ดสูง 70px ต่อเพื่อนหนึ่งคน
   สิบคนก็สามจอ · Instagram ใช้ 56px ต่อแถวและใส่รูปใหญ่กว่าเราด้วยซ้ำ */
.fr-card.big { padding: 11px 13px; border-radius: 18px; }
.fr-card.big + .fr-card.big { margin-top: 8px; }
.fr-top { gap: 10px; }
.fr-card.big .fr-av { width: 42px; height: 42px; font-size: 17px; }
/* บรรทัดจับคู่เยื้องเข้ามาเท่ารูป — อ่านว่า "เรื่องของคนคนนี้" ไม่ใช่แถวใหม่ */
.fr-mt { margin-left: 52px; margin-top: 7px; padding: 6px 10px; font-size: 12px; }
.fr-mt + .fr-mt { margin-top: 5px; }

/* ---- หัวข้อกลุ่มเบาลง ---- */
.fr-sec { font-size: 11.5px; margin: 16px 2px 9px; opacity: .75; }

/* ---- ช่องค้นหาตอนกางออกมา ---- */
.fr-search[hidden] { display: none; }
.fr-search { margin-bottom: 4px; }

/* ---- ปุ่มบนหัวจอเรียงกัน ---- */
.fd-top { gap: 8px; }
.fd-top .fd-people + .fd-people { margin-left: 0; }

/* ---- 1B53b · บีบกรอบที่เหลือ ----
   วัดจริงก่อนแก้: การ์ดเพื่อนใบแรกเริ่มที่ 315px จากขอบบน
   แบ่งเป็น หัวจอ 44 · ตัวกรอง 53 · บรรทัดตัวตน 53 · หัวข้อกลุ่ม ~35 · ระยะห่าง
   สามอย่างหลังบีบได้โดยไม่เสียอะไร ส่วนหัวจอกับตัวกรองเป็นของที่ต้องมี */
.fd-scope { padding: 7px 14px; font-size: 12.5px; }
.fd-scopes { margin-top: 12px; }
.fr-me-line { padding: 7px 11px; margin-bottom: 12px; }
.fr-me-at { font-size: 13.5px; }

/* ---- 1B54 · แถวตัวกรองหลบตอนเลื่อนลง ----
   ย่อความสูงลงศูนย์แทนการเลื่อนออกนอกจอ — เลื่อนออกจะทิ้งช่องว่างไว้ที่เดิม
   แล้วเนื้อหาไม่ได้ขยับขึ้นมาแทน ซึ่งแปลว่าไม่ได้พื้นที่คืนเลย */
.fd-scopes {
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease;
  max-height: 60px; opacity: 1;
}
.fd-tuck .fd-scopes { max-height: 0; opacity: 0; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .fd-scopes { transition: none; } }

/* ---- 1B56 · การ์ดเพื่อนกดได้ ----
   ถังขยะเคยเป็นของเดียวบนการ์ดที่กดได้ ซึ่งแปลว่าการกระทำเดียวที่จอนี้เสนอ
   ให้ทำกับเพื่อน คือการลบเขาทิ้ง · ตอนนี้การ์ดทั้งใบเปิดโปรไฟล์
   ถังขยะจึงต้องเบาลงจนไม่แย่งการกดหลัก แต่ยังหาเจอเมื่อตั้งใจหา */
.fr-card.big { cursor: pointer; }
.fr-card.big:active { transform: scale(.99); }
.fr-go2 { flex: none; display: flex; color: var(--faint); opacity: .55; }
.fr-go2 svg { width: 16px; height: 16px; }
.fr-del { opacity: .35; transition: opacity .14s ease; }
.fr-card.big:hover .fr-del, .fr-del:active { opacity: .9; }
/* บรรทัด "ยังไม่ได้บอกว่าถนัดวิชาไหน" เบาที่สุดในสามแบบ — มันคือคำอธิบายว่าทำไมว่าง
   ไม่ใช่ข้อมูลของคนคนนั้น */
.fr-mt.dim { background: none; color: var(--faint); padding: 4px 0 0; font-size: 11.5px; }

/* ============================================================
   1B61a · แถบช่วงของฟีดมีห้าปุ่มแล้ว
   ------------------------------------------------------------
   ตอนมีสี่ปุ่มมันพอดีจอ 320px แบบเฉียดฉิว · พอเพิ่ม "ทั่วประเทศ" เข้าไป
   ปุ่มรวมกันกว้าง 370px ในแถวกว้าง 320px ที่ตั้ง overflow: hidden ไว้ —
   ผลคือแท็บ "เพื่อนฉัน" โดนตัดหายไปครึ่งใบและ **กดไม่ได้เลย** โดยไม่มีอะไรบอก
   (flex: 1 1 0 ไม่ช่วย เพราะปุ่มหดต่ำกว่าความกว้างของข้อความข้างในไม่ได้)

   แก้สองชั้นคู่กัน ไม่ใช่อย่างใดอย่างหนึ่ง:
   1) บีบ padding ให้ห้าปุ่มพอดีจอ 320px ในกรณีปกติ — ไม่ต้องเลื่อนก็เห็นครบ
   2) เปิดให้เลื่อนแนวนอนไว้เป็นตาข่ายรองรับ สำหรับจอที่แคบกว่านั้น
      คนที่ตั้งฟอนต์ใหญ่ และวันที่มีใครเพิ่มปุ่มที่หก
   ============================================================ */
.fd-scopes {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fd-scopes::-webkit-scrollbar { display: none; }
.fd-scope {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-left: 11px;
  padding-right: 11px;
}

/* ============================================================
   1B64 · ช่องค้นหาเพื่อนต้องเด่น
   ------------------------------------------------------------
   ผู้ใช้บอกตรง ๆ ว่า "อยู่ด้านบนหาไม่เจอ ... ไม่ก็ทำให้มันเด่น"
   มันไม่ได้เล็กเกินไป — มันเคยถูกพับไว้หลังแว่นขยาย (1B53) ซึ่งเหตุผลตอนนั้น
   ถูกสำหรับแอปที่คนมีเพื่อนอยู่แล้ว แต่แอปนี้ยังไม่มีใครมีเพื่อนสักคน
   จอนี้จึงเปิดมาเพื่อค้นหาล้วน ๆ ช่องค้นหาคือ "เนื้อหาหลัก" ไม่ใช่ "เครื่องมือเสริม"
   ============================================================ */
.fr-search.big {
  margin-bottom: 12px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  background: var(--card);
  /* เงาสีแบรนด์บาง ๆ ทำให้มันลอยขึ้นมาจากพื้นโดยไม่ต้องใช้พื้นทึบสีเข้ม
     ซึ่งจะแย่งความสนใจไปจากการ์ดเพื่อนที่อยู่ข้างล่าง */
  box-shadow: 0 2px 10px rgba(37, 99, 235, .14);
}
.fr-search.big input { font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
.fr-search.big > svg { width: 19px; height: 19px; color: var(--blue); }

/* ============================================================
   1B65 · หน้าโปรไฟล์ทรง Instagram
   ------------------------------------------------------------
   ของเดิมวางรูปกลางจอแล้วชื่ออยู่ใต้รูป ซึ่งกินความสูงไปครึ่งจอบน
   โดยยังตอบไม่ได้เลยว่าคนนี้น่าเชื่อแค่ไหน · ทรงของ IG เอารูปกับตัวเลข
   มาไว้บรรทัดเดียวกัน ได้พื้นที่คืนพอที่ปุ่มทักจะอยู่เหนือพับจอเสมอ
   ============================================================ */
.ig-head { display: flex; align-items: center; gap: 18px; padding: 16px 16px 0; }
.ig-av {
  width: 74px; height: 74px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; object-fit: cover;
}
.ig-stats { display: flex; flex: 1; justify-content: space-around; min-width: 0; }
/* ตัวเลขสองในสามกดได้ (พาไปแท็บที่ตรงกัน) จึงเป็น <button> — แต่ต้องหน้าตาเหมือน
   ตัวที่กดไม่ได้เป๊ะ ไม่งั้นจะอ่านเป็นปุ่มสามปุ่มที่มีอันหนึ่งพัง */
.ig-stats > * {
  flex: 1; text-align: center; border: 0; background: none; padding: 4px 0;
  font-family: inherit; color: inherit; cursor: pointer;
}
.ig-stats div { cursor: default; }
.ig-stats b {
  display: block; font-size: 17px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ig-stats span { font-size: 11px; color: var(--muted); }

.ig-id { padding: 14px 16px 0; }
.ig-id > b { font-size: 15px; color: var(--ink); }
.ig-id > i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12.5px; color: var(--muted);
}
.ig-bio { margin: 6px 0 0; padding: 0 16px; font-size: 13px; line-height: 1.65; color: var(--ink); }

.ig-btns { display: flex; gap: 8px; padding: 14px 16px 0; }
.ig-btns button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 0; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card2); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ig-btns button svg { width: 15px; height: 15px; }
.ig-btns button.pri { border-color: var(--blue); background: var(--blue); color: var(--on-accent); }
.ig-btns button.wait { color: var(--muted); }
.ig-btns button:active { transform: scale(.98); }

.ig-why { padding: 14px 16px 0; }
.ig-why p { margin: 0 0 4px; }

/* วิชาเหลือแถวเดียวเลื่อนได้ แทนสองคอลัมน์ที่กินความสูงเป็นสิบบรรทัด
   ป้ายบอกความหมายย้ายเข้าไปอยู่ในชิปเลย ("ช่วยได้ · คณิต") จึงไม่ต้องมีหัวข้อกำกับอีกชั้น */
.ig-strip {
  display: flex; gap: 6px; padding: 14px 16px 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ig-strip::-webkit-scrollbar { display: none; }
.ig-chip {
  flex: none; padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; border: 1.5px solid;
}
.ig-chip.good { border-color: var(--good); color: var(--good); background: transparent; }
.ig-chip.need { border-color: var(--warn, #d9822b); color: var(--warn, #d9822b); background: transparent; }

.ig-tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--line); }
.ig-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 0; border: 0; background: none;
  border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.ig-tabs button svg { width: 14px; height: 14px; }
.ig-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.ig-tabbody { padding: 4px 16px 24px; }

/* ---------- แถวคำตอบ ---------- */
.ig-ans { padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ig-ans-h {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.ig-ans-tag {
  padding: 2px 7px; border-radius: 6px;
  background: var(--card2); color: var(--muted); font-size: 10px; font-weight: 700;
}
.ig-ans-h i { font-style: normal; margin-left: auto; color: var(--faint); }
.ig-ans p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }

/* ปุ่มรายงานบนหัวหน้าโปรไฟล์ — ทุกจอที่มีคนแปลกหน้าต้องมี ไม่มีข้อยกเว้น */
.cp-flag {
  width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: var(--card2); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cp-flag svg { width: 15px; height: 15px; }

/* ============================================================
   1B68 · เก็บรายละเอียดหน้าโปรไฟล์ + ปุ่มข้อความลอย
   ------------------------------------------------------------
   ผู้ใช้ชี้มาสี่จุดพร้อมวงกลมในภาพ: รูป · ตัวเลข · ชื่อที่กลายเป็น "นักเรียน" ·
   และปุ่มข้อความที่อยากให้เห็นชัดกว่านี้
   ============================================================ */

/* ---------- ตัวเลขสามช่อง ---------- */
/* "เลขยังไม่สวย" — ของเดิมเลขกับป้ายขนาดใกล้กันเกินไป เลยอ่านเป็นข้อความสองบรรทัด
   ไม่ใช่ตัวเลขที่มีป้ายกำกับ · ขยายเลขขึ้นสองขั้นแล้วบีบป้ายลง ระยะห่างระหว่างสองอันเหลือน้อย ๆ
   จะได้อ่านเป็นก้อนเดียว และเพิ่มเส้นคั่นบาง ๆ ให้สามช่องแยกกันโดยไม่ต้องใช้ที่ว่างเยอะ */
.ig-stats > * { padding: 2px 0; position: relative; }
.ig-stats > * + *::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--line);
}
.ig-stats b {
  font-size: 20px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em;
}
.ig-stats span {
  display: block; margin-top: 1px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted);
}
/* ช่องที่กดได้บอกด้วยสีตอนกด ไม่ใช่ตอนอยู่เฉย ๆ — ไม่งั้นสามช่องจะดูไม่เท่ากัน
   ทั้งที่มันเป็นข้อมูลชุดเดียวกัน */
.ig-stats button:active b { color: var(--blue); }

/* ---------- ป้ายติ๊กถูก "นักเรียน" ---------- */
/* คำว่า "นักเรียน" เคยไปนั่งเป็นชื่อคน เพราะเป็นค่าปริยายของ display_name ในฐานข้อมูล
   ย้ายมาเป็นป้ายข้างชื่อแทน ตามที่ผู้ใช้เสนอ — บอกสถานะได้เหมือนเดิมโดยไม่กินที่ของชื่อจริง */
.ig-tick {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 2px 7px 2px 5px; border-radius: 999px;
  background: var(--blue-soft, var(--card2)); color: var(--blue);
  font-size: 10.5px; font-weight: 700; vertical-align: 2px;
}
.ig-tick svg { width: 11px; height: 11px; }

/* ---------- ปุ่มข้อความลอยมุมล่างขวา ---------- */
/* position: absolute ตัวเดียวกับ .tabbar และ .runbar — ทั้งสามอิงกล่องเดียวกัน
   จึงเรียงกันได้โดยไม่ต้องเดาความสูงของกันและกัน (ดู style.css บรรทัด 254) */
.fd-fab {
  position: absolute; right: 16px;
  bottom: calc(var(--tabgap) + 78px);
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--blue); color: var(--on-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 6;
}
.fd-fab svg { width: 22px; height: 22px; }
.fd-fab:active { transform: scale(.94); }
/* จำนวนคำขอที่ยังไม่ได้ตอบ — เป็นตัวเลขจริง ไม่ใช่จุดแดงเปล่า ๆ
   เพราะ "มีคนทักมา 3 คน" กับ "มีคนทักมา" ทำให้คนกดต่างกันมาก */
.fd-fab i {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px;
  background: var(--bad, #e5484d); color: #fff;
  border: 2px solid var(--bg, #fff);
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- แตะรูปโปรไฟล์แล้วขยาย ---------- */
/* วงกลม 74px บอกไม่ได้ว่าในรูปมีใครอยู่บ้าง ซึ่งเป็นข้อมูลที่คนอยากได้จริง
   ตอนกำลังตัดสินใจว่าจะทักคนแปลกหน้าคนนี้ดีไหม */
.ig-av.tap { cursor: pointer; }
.ig-av.tap:active { transform: scale(.96); }
.face-zoom {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: faceIn .16s ease;
}
.face-zoom img {
  max-width: 100%; max-height: 100%;
  border-radius: 50%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
@keyframes faceIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .face-zoom { animation: none } }

/* ============================================================
   1B70 · หัวโปรไฟล์ตัวเดียวใช้สองจอ + ปุ่มข้อความที่อยู่นิ่ง
   ============================================================ */

/* ---------- ป้ายกล้องบนรูปตัวเอง ---------- */
/* แตะรูป = ขยาย · แตะป้ายกล้อง = เปลี่ยนรูป (ทรงเดียวกับ IG)
   ของเดิมแตะรูปแล้วเด้งไปเลือกไฟล์ทันที ซึ่งแปลว่าดูรูปตัวเองไม่ได้เลย */
.ig-av-wrap { position: relative; flex: none; }
.ig-av-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--card); background: var(--blue); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ig-av-cam svg { width: 13px; height: 13px; }
.ig-av-cam:active { transform: scale(.92); }

/* ---------- หัวโปรไฟล์ในแท็บ "ฉัน" ---------- */
/* .pf-body มี padding ซ้ายขวาของตัวเองอยู่แล้ว (มาจาก .screen)
   ถ้าปล่อยให้หัวใส่ padding ซ้ำ ขอบจะลึกกว่าจออื่นสองเท่าและอ่านเป็นคนละแอป */
/* 1C09 · .ig-top เข้ารายการนี้ด้วย — มันตกหล่นมาตลอด
   ผลคือแถว "@ชื่อผู้ใช้ · ม.ปลาย" เยื้องเข้ามา 36px (20 ของจอ + 16 ของตัวเอง)
   ขณะที่ชื่อใต้มันอยู่ที่ 20px · ต่างกัน 16px บนสองบรรทัดที่ติดกัน
   (1C10 ถอดทรง compact ออกแล้ว แต่กฎนี้เป็นการแก้ขอบคนละเรื่อง จึงอยู่ต่อ) */
#pfHead .ig-head, #pfHead .ig-id, #pfHead .ig-bio, #pfHead .ig-top,
#pfHead .ig-btns, #pfHead .ig-strip { padding-left: 0; padding-right: 0; }
#pfHead .ig-head { padding-top: 0; }
/* เฟืองชิดขอบขวาจริง — .ig-set กัน margin-right ติดลบไว้ให้พื้นที่กด 34px
   เกินขอบได้ ซึ่งถูกตอน .ig-top มี padding ของตัวเอง แต่กฎข้างบนถอดไปแล้ว */
#pfHead .ig-set { margin-right: -7px; }

/* ---------- ตัวเลขที่เห็นคนเดียว ---------- */
/* เส้นประคือเส้นแบ่ง "ของสาธารณะ" กับ "ของส่วนตัว" — ต้องเห็นด้วยตาโดยไม่ต้องอ่าน
   เพราะทั้งหน้านี้คือหน้าเดียวกับที่เพื่อนเปิดดู คนต้องรู้ทันทีว่าอะไรหลุดไปถึงเขาบ้าง */
.pf-priv { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pf-priv-lb {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.pf-priv-lb svg { width: 12px; height: 12px; }
.pf-priv-n { display: flex; gap: 8px; margin-top: 9px; }
.pf-priv-n div {
  flex: 1; padding: 10px 4px; border-radius: 12px; text-align: center;
  background: var(--card2);
}
.pf-priv-n b {
  display: block; font-size: 17px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pf-priv-n span { font-size: 10.5px; color: var(--muted); }

/* ---------- ปุ่มข้อความลอย ---------- */
/* อยู่นอกกองจอ เป็นพี่น้องกับ .tabbar จึงอิงกล่องเดียวกันและอยู่นิ่งตอนเลื่อน
   (ของเดิมเป็นลูกของ .screen ซึ่ง overflow-y: auto — มันเลื่อนหนีตามเนื้อหา) */
.fd-fab[hidden] { display: none; }
.fd-fab { z-index: 6; }

/* ============================================================
   1B71 · แถวตัวเลข — ภาษาเดียวทั้งจอ
   ------------------------------------------------------------
   ผู้ใช้บอกว่า "เลขก็ต้องเท่ากัน" ซึ่งถูก และปัญหาลึกกว่าที่เห็น:
   จอ "ฉัน" ประกอบด้วยแถวตัวเลขสามแถวที่มาจากสามยุค เขียนคนละสไตล์กันหมด —
   ตัวเลขสาธารณะ 20px ฟอนต์ปกติ · แถบเหลือง 23px ฟอนต์ Space Mono ·
   บล็อกส่วนตัว 17px อีกแบบ · ไม่มีสองแถวไหนตรงกันเลยสักคู่

   .num-row เป็นแถวตัวเลขแบบเดียวของทั้งจอตั้งแต่นี้ไป
   ตัวเลขทุกตัวใช้ tabular-nums จึงกว้างเท่ากันทุกหลัก — "1" กับ "329"
   ยืนคนละช่องแล้วยังตรงแนวกัน ซึ่งเป็นสิ่งที่ทำให้แถวตัวเลขอ่านเป็นตาราง ไม่ใช่ข้อความ
   ============================================================ */
.num-row { display: flex; align-items: stretch; }
.num-row > * {
  flex: 1 1 0; min-width: 0; position: relative;
  padding: 2px 2px; text-align: center;
  border: 0; background: none; font-family: inherit; color: inherit;
}
/* เส้นคั่นวาดด้วย ::before ไม่ใช่ <div class="sep"> — ช่องว่างที่เป็น element จริง
   จะกินความกว้างไปจากช่องตัวเลข ทำให้สามช่องกว้างไม่เท่ากันเมื่อเลขยาวไม่เท่ากัน */
.num-row > * + *::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--line);
}
.num-row b {
  display: block;
  font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.num-row span {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ตัวเลข **ขนาดเดียวกันทุกแถว** ตามที่ผู้ใช้สั่ง ("เลขก็ต้องเท่ากัน")
   ลดเฉพาะป้ายกำกับในแถวสี่ช่อง เพราะช่องแคบลงเหลือ ~84px แล้วคำอย่าง "ต่อเนื่อง" จะตัด
   ตัวเลขไม่ต้องลด — "329" ที่ 20px กว้าง ~36px ยังเหลือที่ในช่อง 84px อีกเท่าตัว */
.num-row.four span { font-size: 10px; }
.num-row button { cursor: pointer; }
.num-row button:active b { color: var(--blue); }

/* ---------- บล็อกส่วนตัว ---------- */
/* ไม่มีพื้นสีของตัวเองแล้ว — ใช้เส้นประกับป้ายบอกขอบเขตพอ
   พื้นสีทำให้มันแข่งกับหัวโปรไฟล์ข้างบนทั้งที่เป็นข้อมูลรองกว่า */
.pf-priv { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pf-priv-lb {
  display: flex; align-items: center; gap: 5px; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.pf-priv-lb svg { width: 12px; height: 12px; }
.pf-priv-n { display: none; }   /* ของเดิม — แทนที่ด้วย .num-row แล้ว */

/* ---------- แถวชิปวิชา ---------- */
/* เลื่อนได้อยู่แล้ว แต่ขอบขวาตัดกลางชิปพอดีจนดูเหมือนจอเพี้ยน
   ไล่จางที่ขอบบอกว่า "ยังมีต่อ" โดยไม่ต้องใส่ปุ่มหรือลูกศรเพิ่ม */
/* ---------- ชิปวิชา (1B72) ----------
   ผู้ใช้บอกว่า "อยากให้อันตรงนี้ออก ไม่ก็ใส่ให้มันดูดีกว่านี้"
   ปัญหาจริงคือมันเป็นแถวเลื่อนที่ตัดกลางชิปพอดี — ไล่จางช่วยได้แค่บอกว่ายังมีต่อ
   แต่ยังต้องเลื่อนถึงจะอ่านครบ ทั้งที่ข้อมูลชุดนี้มีแค่ 2-4 ชิ้นในกรณีปกติ
   ของที่อ่านครบได้ในสองบรรทัด ไม่ควรบังคับให้เลื่อน — ให้มันตกบรรทัดไปเลย */
.ig-strip {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 6px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ============================================================
   1B73 · ลำดับสายตาในแท็บ "ฉัน"
   ------------------------------------------------------------
   ผู้ใช้เลือกทาง ข: ให้หัวโปรไฟล์เด่นอยู่คนเดียว ที่เหลือเงียบลงและไล่ลงมา
   ตามลำดับความสำคัญ

   ปัญหาเดิม: **ทุกอย่างบนจอนี้ดังเท่ากันหมด** — แถวทางเข้าทุกแถวเป็นการ์ดลอย
   มีขอบ มีเงา และมีไอคอนพื้นฟ้าทึบ 40px ของตัวเอง เจ็ดแถวเรียงกันจึงเป็น
   ไอคอนฟ้าทึบเจ็ดอันแข่งกันดึงตา · เมื่อทุกอย่างเด่น แปลว่าไม่มีอะไรเด่น
   และหัวโปรไฟล์ซึ่งควรเป็นพระเอกของจอก็ถูกกลบไปด้วย

   ลำดับใหม่ (ดังไปเงียบ):
     1. หัวโปรไฟล์ — รูป ตัวเลขสาธารณะ ปุ่ม   ← พระเอก
     2. ตัวเลขส่วนตัว                          ← ข้อมูล
     3. กราฟ 7 วัน                             ← ข้อมูลรอง
     4. รายการทางเข้า                          ← เมนู เงียบที่สุด
   ============================================================ */

/* ---------- รายการทางเข้า: กลุ่มเดียว ไม่ใช่การ์ดลอยเจ็ดใบ ---------- */
/* เจ็ดกล่องที่มีเงาของตัวเองอ่านเป็น "ของเจ็ดชิ้นที่ไม่เกี่ยวกัน"
   กลุ่มเดียวที่มีเส้นคั่นบาง ๆ อ่านเป็น "เมนูหนึ่งชุด" ซึ่งตรงกับความจริงมากกว่า */
#scr-profile .pf-entry {
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card, 16px);
  background: var(--card);
  overflow: hidden;
}
/* 1C06 · ทุกแถวสูงเท่ากันเป๊ะ ไม่ใช่สูงตามเนื้อในของตัวเอง
   ของเดิมใช้ padding อย่างเดียว ความสูงจึงลอยตามความสูงของชิปกับตัวหนังสือ
   แถวที่ค่าขวามือยาวกว่าเพื่อนสูงขึ้นมาหนึ่งหน่วย ซึ่งตาจับได้ว่า "ไม่ตรงกัน"
   แม้จะบอกไม่ถูกว่าไม่ตรงตรงไหน · 52px = 34px ของชิป + 9px บนล่าง */
#scr-profile .pf-entry .pe {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  height: 52px;
  padding: 0 14px;
}
#scr-profile .pf-entry .pe + .pe { border-top: 1px solid var(--line); }

/* 1C06 · ชิปแบบ iOS Settings — พื้นทึบสีธีม + สัญลักษณ์ทึบสีขาว
   เจ้าของเลือกแบบนี้เองจากสองแบบที่ให้ดู (18 ก.ย. 2569)
   มุม 8px ไม่ใช่ 11px — iOS ใช้มุมที่คมกว่าครึ่งหนึ่งของด้าน ชิป 34px ที่มุม 11px
   เริ่มอ่านเป็นวงกลมบี้ ๆ ไม่ใช่สี่เหลี่ยม · สัญลักษณ์เป็นชุด #sf-* ซึ่งเป็น fill
   ไม่ใช่ #lu-* ที่เป็นเส้น — เส้นบนพื้นทึบจมหายไปกับพื้น */
#scr-profile .pf-entry .pe-ic {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--blue);
  color: var(--on-accent);
}
#scr-profile .pf-entry .pe-ic svg { width: 19px; height: 19px; stroke-width: 0; }
#scr-profile .pf-entry .pe-tx b { font-size: 14.5px; font-weight: 600; }
#scr-profile .pf-entry .pe-tx i { font-size: 11px; }

/* ---------- หัวข้อกลุ่ม ---------- */
/* ระยะเหนือหัวข้อคือสิ่งที่บอกว่า "กลุ่มใหม่เริ่มตรงนี้" — ชัดกว่าเส้นคั่นหรือกรอบ
   และไม่ต้องเพิ่มอะไรลงบนจอเลยสักชิ้น */
#scr-profile .pf-sec { margin: 26px 4px 8px; font-size: 10.5px; color: var(--faint); }

/* ---------- กราฟกับการ์ดข้อมูล ---------- */
/* เหลือเส้นขอบบาง ๆ ไม่มีเงา · เงาแปลว่า "ของชิ้นนี้ลอยอยู่เหนือของอื่น"
   ซึ่งไม่จริงสำหรับกราฟสรุปที่อยู่กลางจอ */
#scr-profile .st-card { box-shadow: none; margin-top: 10px; }
/* 1C08 · 26px นี้เคยเป็นระยะเหนือ "หัวข้อกลุ่ม" ซึ่งถูกถอดไปแล้ว
   แถวที่เหลือมีแต่ลิงก์ตัวเดียว ระยะขนาดนั้นทำให้มันลอยไม่ติดกับช่องที่มันคุม */
#scr-profile .st-open { margin-top: 10px; }
#scr-profile .pf-me .st-card { margin-top: 0; }

/* 1C08 · ระยะระหว่างก้อนในแท็บ "ฉัน" ลดจาก 24px เหลือ 16px
   เจ้าของสั่งให้ลดพื้นที่ว่าง · 24px เป็นค่ากลางของ .scr-body ที่ใช้กับจอซึ่งมี
   ก้อนใหญ่ไม่กี่ก้อน แต่จอนี้มีเจ็ดก้อนซ้อนกัน 24px คูณหกช่อง = 144px
   ที่ต้องเลื่อนผ่านโดยไม่มีอะไรอยู่ในนั้น */
#scr-profile .pf-body { gap: 16px; }

/* ---------- บล็อกส่วนตัว ---------- */
/* เว้นบนให้มากกว่าเดิมหน่อย เพื่อให้เส้นประอ่านเป็นเส้นแบ่งจริง ๆ
   ไม่ใช่เส้นที่บังเอิญอยู่ติดกับปุ่มข้างบน */
#scr-profile .pf-priv { margin-top: 24px; }

/* ============================================================
   1B95 · แถวบนสุดของหัวโปรไฟล์ตัวเอง
   ============================================================
   @ชื่อผู้ใช้ · ชั้นเรียน ทางซ้าย — เฟืองทางขวา · ขึ้นเฉพาะหน้าตัวเอง
   (หน้าที่เพื่อนเปิดดูไม่มีแถวนี้ เพราะไม่มีอะไรให้เขาตั้งค่า)

   ระยะซ้าย/ขวา 16px ตรงกับ .ig-head/.ig-id ทุกก้อนในหัว — ของที่อยู่คนละบรรทัด
   แต่ขอบไม่ตรงกันคือสิ่งแรกที่ตาจับได้ว่า "หน้านี้ประกอบมาจากหลายชิ้น"

   เฟืองไม่มีพื้นวงกลม เหลือแค่ไอคอน — หัวนี้ไม่มีกล่องครอบ ปุ่มพื้นทึบจึงกลายเป็น
   จุดหนักลอยอยู่มุมขวาโดยไม่มีอะไรรองรับ (IG ก็วางเปล่าแบบนี้) */
.ig-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px 0;
}
.ig-hd {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
/* พื้นที่กดต้อง 34px เต็ม แม้ไอคอนจะ 19px — นิ้วไม่ได้เล็งที่ไอคอน
   ติดลบขวา 6px เพื่อให้ "ขอบไอคอน" เสมอ 16px ไม่ใช่ "ขอบพื้นที่กด" */
.ig-set {
  flex: none; width: 34px; height: 34px; margin-right: -6px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
  cursor: pointer;
}
.ig-set svg { width: 19px; height: 19px; }
.ig-set:active { color: var(--ink); transform: scale(.92); }


/* ============================================================
   1B96 · สีประจำแถวในลิสต์แท็บ "ฉัน"
   ============================================================
   ของเดิม (1B-ก่อนหน้า) ตั้งใจให้ไอคอนเป็น "สัญลักษณ์เงียบ" พื้น --card2 ทุกใบ
   เหตุผลตอนนั้นถูกสำหรับธีมสว่าง — สีทึบเจ็ดใบเรียงกันแย่งสายตากับพระเอกจริง
   แต่บนธีมมืด --card2 ห่างจาก --card แค่ไม่กี่หน่วย ชิปจึงหายไปกับพื้นการ์ดทั้งแถว
   (เจ้าของส่งภาพธีมอวกาศมาแล้ววงไว้ 14 ก.ย. 2569)

   ทางกลางคือ **พื้นจาง + ไอคอนสีเข้ม** ไม่ใช่พื้นทึบ — ได้สีคืนมาโดยไม่กลายเป็น
   ตราสีเจ็ดใบ · สีมาจากโทเคนของธีม ไม่ใช่ค่าตายตัว จึงถูกโทนทั้ง 14 ธีมโดยอัตโนมัติ
   ใช้แค่ blue / good / warn ที่ทุกธีมนิยามครบ — ไม่แตะ --alert เพราะนั่นแปลว่า
   "อันตราย" และ safety.css ใช้มันสื่อความหมายนั้นอยู่จริงในลิสต์เดียวกันนี้

   ความจำเพาะต้องสูงกว่ากฎพื้นเรียบข้างบน (#scr-profile .pf-entry .pe-ic = 1,2,0)
   จึงต้องมี #scr-profile นำหน้าด้วย ไม่งั้นเขียนไปก็ไม่มีผล */
/* 1B98 · tone-good / tone-warn ถูกถอดออก — เจ้าของบอกว่า "สีฟีเจอร์มันมั่วไป"
   และถูก: ฟ้า/เขียว/เหลืองที่แจกให้แถวที่ 1/2/3 ไม่ได้แปลว่าอะไรสักสี มันคือ
   ลำดับ ไม่ใช่ความหมาย · สีที่เข้ารหัสลำดับอ่านเป็นสีมั่วเสมอ เพราะสมองไปหา
   ความหมายแล้วไม่เจอ · ตระกูลเดียวทั้งลิสต์ แล้วให้ "สีที่ต่างออกไป" เหลือที่เดียว
   คือทองของร้านค้า ซึ่งแปลว่า "ของที่ได้มาจริงอยู่ในนี้" ตามกฎสีทองเดิมของโปรเจกต์ */
/* 1C06 · ชุมชน/Pro ได้สีเท่าแถวอื่น — เจ้าของสั่งเอง และเหตุผลเดิมที่ทำให้มันจาง
   ("แถวที่กดแล้วไม่ได้ของไม่ควรดังเท่าแถวที่ได้") แก้ปัญหาผิดจุด: ชิปที่จาง
   บอกว่า "ปุ่มนี้กดไม่ได้" ซึ่งไม่จริง — กดแล้วได้แผ่นอธิบายจริง ๆ ทั้งสองแถว
   สิ่งที่บอกความจริงคือคำในคอลัมน์ขวา ซึ่งยังอยู่ครบ */
#scr-profile .pf-entry .pe .pe-ic { background: var(--blue); color: var(--on-accent); }

/* ---------- ค่าชิดขวา ----------
   ตัวเลข/สถานะของแถวย้ายมาอยู่บรรทัดเดียวกับชื่อ ชิดขวาก่อนลูกศร
   ตากวาดคอลัมน์เดียวลงมาได้ครบทุกแถว ซึ่งบรรทัดที่สองไม่เคยทำได้
   ตัดบรรทัดไม่ได้ (nowrap) — แถวที่สูงกว่าเพื่อนหนึ่งบรรทัดทำให้ลิสต์อ่านเป็นคนละชุด
   ยาวเกินก็ให้หดตัวเองด้วย ellipsis ไม่ใช่ไปเบียดชื่อแถว */
#scr-profile .pf-entry .pe-v {
  flex: 0 1 auto; min-width: 0;
  font-style: normal; font-size: 12px; font-weight: 500;
  color: var(--faint); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#scr-profile .pf-entry .pe-tx { flex: 1 1 auto; }

/* ---------- ร้านค้า: แถวแรกของลิสต์ (1C09) ----------
   เคยเป็นการ์ดขอบทองเดี่ยวเหนือลิสต์ (1B98) — ตอนนั้นลิสต์เป็นการ์ดลอยเจ็ดใบ
   การ์ดขอบทองจึงเป็นใบที่เน้นกว่าเพื่อน · พอลิสต์กลายเป็นใบเดียวมีเส้นคั่น
   การ์ดที่ลอยอยู่ใบเดียวกลางจออ่านกลับอ่านเป็น "ของหลุดชุด" มากกว่า "ของเน้น"

   ข้อกำหนดของ 1B98 คือ "บนสุด" กับ "เน้นสี" — ยังครบทั้งคู่: มันเป็นแถวแรก
   ของลิสต์ และเป็นแถวเดียวที่ได้ชิปทองกับตัวเลขทอง ขณะที่อีกหกแถวเป็นฟ้า/เทา
   ทองในโปรเจกต์นี้แปลว่า "ของที่ได้มาจริงแล้ว" ซึ่งโทเคนเป็นอย่างนั้นจริง */
#scr-profile .pf-entry .pe.pe-shop .pe-ic {
  background: var(--gold-soft, var(--warn-soft));
  color: var(--gold-text, var(--warn));
}
#scr-profile .pf-entry .pe-shop .pe-v {
  color: var(--gold-text, var(--warn)); font-weight: 600;
}

/* ช่องสีธีม — ไม่มีไอคอนข้างใน ตัวมันเองคือสีของธีมที่ใช้อยู่
   ขอบบาง ๆ ไว้กันธีมที่พื้นใกล้สีการ์ด (สว่าง/Crystal) จนดูเหมือนช่องว่าง */
#scr-profile .pf-entry .pe-sw {
  border: 1px solid var(--line);
  background-size: cover;
}

/* ร้านค้าได้สีทองคืน — alt.css ให้ไว้ตั้งแต่แรก (.pe-shop .pe-ic) แต่กฎพื้นเรียบ
   ข้างบนมี #scr-profile นำหน้า ความจำเพาะจึงสูงกว่าและลบทองทิ้งไปเงียบ ๆ มานานแล้ว
   ทองใช้ได้ตรงนี้เพราะโทเคนคือของที่ "ได้มาแล้วจริง" ไม่ใช่ของที่ยังไม่ได้ทำ

   ชุมชน กับ Pro ยังเป็นสีเงียบต่อไปโดยตั้งใจ — ทั้งคู่ยังเปิดไม่ได้
   แถวที่กดแล้วไม่ได้ของ ไม่ควรดังเท่าแถวที่กดแล้วได้ */
/* 1C09 · ร้านค้ากลับเข้าลิสต์แล้ว ทองของมันอยู่ในบล็อก "ร้านค้า: แถวแรกของลิสต์" ข้างบน */