/* =====================================================================
   รอบ 81e: หน้า "ฟีเจอร์เพิ่มเติม" (/features) + ลิงก์ท้ายเมนู "+ ฟีเจอร์เพิ่มเติม"
   - prefix คลาส ft- (ลิงก์เมนู .nav-more-features) · สีจากตัวแปรใน :root (app.css / dark.css) → โหมดมืดใช้ได้เลย
   - มือถือ ≤760px: การ์ด 1 คอลัมน์ ไม่เลื่อนแนวนอนที่ 390px
   ===================================================================== */

.ft-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ft-lead { margin: -4px 0 4px; color: var(--muted); max-width: 70ch; }
.ft-note { margin: 0; }
.ft-saved { color: var(--ok); font-weight: 600; }

.ft-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ft-group-title { margin: 8px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--muted); }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.ft-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.ft-card.is-off { background: var(--bg); border-style: dashed; }
.ft-card-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ft-ico {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand);
}
.ft-card.is-off .ft-ico { background: var(--chip); color: var(--muted); }
.ft-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft-card-title h3 { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }

.ft-status {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: var(--chip); color: var(--muted); white-space: normal;
}
.ft-status.is-plan, .ft-status.is-addon { background: var(--ok-soft); color: var(--ok); }
.ft-status.is-trial { background: var(--warn-soft); color: var(--warn-text, #7a5300); }

.ft-desc { margin: 0; color: var(--ink); font-size: .92rem; overflow-wrap: anywhere; }
.ft-bens { margin: 0; padding-left: 18px; color: var(--muted); font-size: .85rem; display: flex; flex-direction: column; gap: 2px; }
.ft-bens li { overflow-wrap: anywhere; }

.ft-card-foot {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.ft-menu-toggle { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); }
.ft-price { flex: 1 1 auto; font-weight: 700; color: var(--ink); }

/* รอบ 104: การ์ดร่วม <FeatureCard> ในแท็บ "ฟีเจอร์ที่ใช้" ของโรงเรียน (/school/setup?tab=features) — กว้างเต็มแผง */
.scs-feat.scs-feat-wide { max-width: none; }
.scs-feat-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ลิงก์เล็กท้ายเมนูซ้าย (เจ้าของ/ผู้ดูแล) */
.nav a.nav-more-features {
  margin-top: 6px; font-size: .85rem; color: #9fb3c8; border: 1px dashed rgba(255,255,255,.18);
}
.nav a.nav-more-features:hover { color: #fff; }

@media (max-width: 760px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-card { padding: 12px 14px; }
}