/*!
 * Creative Spark — Creative Media Playground
 * พัฒนาระบบโดย อาจารย์ ดร.วรวิทย์ สังฆทิพย์
 * ภาควิชาสื่อนฤมิต คณะวิทยาการสารสนเทศ มหาวิทยาลัยมหาสารคาม
 * อีเมล worawith.s@msu.ac.th
 */
/* ═══════════════════════════════════════════════════════════════════
   หลังบ้าน: หน้า login / เปิดบัญชี / พื้นที่นิสิต (studio) / ผู้ดูแลระบบ (admin)
   ใช้ tokens และส่วนประกอบเดียวกับหน้าบ้าน (app.css)
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────── หน้าเดี่ยวแบบการ์ดกลางจอ (login, เปิดบัญชี, ติดตั้ง) ───────────── */
.auth {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: calc(var(--header-h) + 2rem) 1rem 3rem;
}
.auth__card { width: 100%; max-width: 28rem; --frame: var(--line); }
.auth__inner { padding: 1.5rem; }
.auth__title { margin-top: 0.25rem; font-size: 1.75rem; }
.auth__lead { margin-top: 0.5rem; color: var(--muted); }
.auth__links { margin-top: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.auth__links a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .auth__inner { padding: 2rem; } }

/* ───────────── ฟอร์ม ───────────── */
.form { display: grid; gap: 1.125rem; margin-top: 1.5rem; }
.field { display: grid; gap: 0.375rem; }
.field__label { font-family: var(--font-head); font-weight: 500; }
.field__help { font-size: 0.875rem; color: var(--muted); }
.field__req { color: var(--spark); }
.input, .select, .textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 25%, transparent); }
.input[aria-invalid="true"] { border-color: #ff6b6b; }
.input--code { font-family: var(--font-head); letter-spacing: 0.15em; text-transform: uppercase; }
.input--file { padding: 0.5rem; min-height: 0; }
.check { display: flex; align-items: flex-start; gap: 0.625rem; min-height: 2.75rem; padding-top: 0.6rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--sky); flex: none; }
.form-row { display: grid; gap: 1.125rem; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ปุ่มหลักของหลังบ้าน (ไม่ใช้ --spark ซึ่งสงวนไว้ให้ปุ่มส่งผลงานของหน้าบ้าน) */
.btn-primary { background: var(--sky); color: var(--bg); }
.btn-primary:hover { background: #74c0f0; }
.btn-danger { color: #ff8a8a; background: color-mix(in srgb, #ff6b6b 10%, var(--bg)); box-shadow: inset 0 0 0 2px #ff8a8a; }
.btn-sm { min-height: 2.5rem; padding: 0.375rem 1rem; font-size: 0.9375rem; --cut: 8px; }

/* ───────────── ข้อความแจ้งเตือน ───────────── */
.alert {
  display: flex; gap: 0.75rem; padding: 0.875rem 1rem;
  border-left: 4px solid var(--muted); background: var(--surface);
}
.alert--error { border-color: #ff6b6b; background: color-mix(in srgb, #ff6b6b 10%, var(--surface)); }
.alert--ok { border-color: var(--teal-bright); background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.alert--info { border-color: var(--sky); }
.alert--warn { border-color: var(--spark); background: color-mix(in srgb, var(--spark) 8%, var(--surface)); }
.alerts { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }

/* ───────────── โครงหลังบ้าน: เมนูด้านข้าง + เนื้อหา ───────────── */
.bo { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 4rem; min-height: 80dvh; }
.bo__grid { display: grid; gap: 1.5rem; }
.bo-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.bo-nav::-webkit-scrollbar { display: none; }
.bo-nav__head { display: none; }
.bo-nav a {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem;
  font-family: var(--font-head); font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent;
}
.bo-nav a:hover { color: var(--text); }
.bo-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--sky); }
.bo-nav__count { min-width: 1.5rem; padding: 0 0.375rem; font-size: 0.75rem; text-align: center; background: var(--spark); color: var(--bg); }
.bo-main { min-width: 0; }
.bo-title { font-size: 1.75rem; }
.bo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.bo-head .eyebrow { margin-bottom: 0.25rem; }
@media (min-width: 1024px) {
  .bo__grid { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; }
  .bo-nav { flex-direction: column; border-bottom: 0; border-left: 1px solid var(--line); align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .bo-nav__head { display: block; padding: 0 1rem 0.75rem; }
  .bo-nav a { border-bottom: 0; border-left: 2px solid transparent; margin-left: -1px; }
  .bo-nav a[aria-current="page"] { border-left-color: var(--sky); }
}

/* ───────────── แผง / การ์ดสถิติ ───────────── */
.panel { --frame: var(--line); }
.panel__inner { padding: 1.25rem; }
.panel + .panel { margin-top: 1.25rem; }
.panel__title { font-size: 1.25rem; }
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: 1rem; background: var(--surface); border-left: 4px solid var(--accent-line, var(--sky)); }
.stat__value { font-family: var(--font-head); font-weight: 600; font-size: 2rem; line-height: 1.1; }
.stat__label { color: var(--muted); font-size: 0.9375rem; }
.stat--warn { --accent-line: var(--spark); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────────── ตาราง ───────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-family: var(--font-head); font-weight: 500; color: var(--muted); white-space: nowrap; background: var(--surface); }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.table .num { font-family: var(--font-head); letter-spacing: 0.05em; white-space: nowrap; }
.table--error td { color: #ff9b9b; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ───────────── ป้ายสถานะ ───────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.625rem; white-space: nowrap;
  font-family: var(--font-head); font-size: 0.8125rem; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
}
.pill::before { content: ""; width: 0.4rem; height: 0.4rem; background: currentColor; }
.pill--ok { color: var(--teal-bright); }
.pill--wait { color: var(--spark); }
.pill--info { color: var(--sky); }
.pill--bad { color: #ff8a8a; }

/* ───────────── ตัวกรองแบบฟอร์ม ───────────── */
.toolbar { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .toolbar { grid-template-columns: minmax(0, 1fr) 14rem auto; align-items: end; } }

/* ───────────── รหัสยืนยันสำหรับพิมพ์แจก ───────────── */
.code-text { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.12em; color: var(--spark); white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.25rem; align-items: center; justify-content: space-between; }
.pager__nav { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.pager__nav .btn { min-width: 2.75rem; padding-inline: 0.75rem; }
.pager__btn { font-size: 1.125rem; }
.pager__btn.is-disabled { opacity: 0.35; pointer-events: none; }
.pager__gap { padding-inline: 0.25rem; color: var(--muted); }
.pager__info { font-size: 0.875rem; flex: 1 1 14rem; }
.pager__jump { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; }
.pager__jump .input { width: 5.5rem; min-height: 2.5rem; }

@media print {
  .site-header, .site-footer, .bo-nav, .no-print, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .bo { padding: 0; }
  .table th, .table td { color: #000; border-color: #999; background: #fff; }
  .code-text { color: #000; }
}

.bo-nav form { display: flex; }
.bo-nav__logout {
  flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem;
  font-family: var(--font-head); color: var(--muted);
}
.bo-nav__logout:hover { color: #ff8a8a; }
@media (min-width: 1024px) { .bo-nav form { margin-top: 1rem; } }

.panel__text { margin-top: 0.5rem; }
.panel--spaced { margin-top: 1.5rem; }
.panel__sub { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.panel__actions { margin-top: 1.5rem; }
.bo-title__count { font-size: 1rem; }
code { font-family: var(--font-head); font-size: 0.9em; color: var(--text); background: var(--bg); padding: 0 0.25rem; }
.panel--narrow { max-width: 32rem; }

.bo-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1200px) { .bo-split { grid-template-columns: 24rem minmax(0, 1fr); align-items: start; } }
.field__help a, .panel__text a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.bo-note { margin: -0.75rem 0 1.25rem; font-size: 0.875rem; }
@media (min-width: 1200px) { .bo-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.panel__table { margin-top: 0.75rem; }
.bar-col { width: 40%; }
.bar { display: block; height: 0.5rem; width: var(--w); min-width: 2px; background: var(--grad-cmd); }
.rank-list { margin-top: 0.75rem; display: grid; gap: 0.5rem; counter-reset: rank; }
.rank-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); counter-increment: rank; }
.rank-list li::before { content: counter(rank); font-family: var(--font-head); color: var(--accent, var(--muted)); min-width: 1.5rem; }
.rank-list li > :first-child { flex: 1; }
.rank-list a:hover { color: var(--sky); }

/* ═════════════ พื้นที่นิสิต: รายการผลงาน ═════════════ */
.studio-works { display: grid; gap: 0.75rem; }
.studio-work__link {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 0.75rem; background: var(--surface); box-shadow: inset 3px 0 0 var(--accent);
  transition: background-color 0.2s;
}
.studio-work__link:hover { background: color-mix(in srgb, var(--accent-fill) 10%, var(--surface)); }
.studio-work__thumb { aspect-ratio: 16 / 9; background: var(--bg); display: grid; place-items: center; overflow: hidden; font-size: 0.75rem; text-align: center; }
.studio-work__thumb img { width: 100%; height: 100%; object-fit: cover; }
.studio-work__title { font-size: 1.125rem; margin-top: 0.25rem; }
.studio-work__meta { font-size: 0.875rem; }
.studio-work__go { color: var(--accent); font-size: 1.25rem; }
@media (min-width: 640px) { .studio-work__link { grid-template-columns: 10rem minmax(0, 1fr) auto; } }

/* ═════════════ ฟอร์มผลงาน ═════════════ */
.bo-head__meta { margin-top: 0.5rem; }
.bo-head__meta a, .bo-head .eyebrow a { color: var(--sky); }
.form-toc { display: flex; gap: 0.25rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; font-size: 0.9375rem; }
.form-toc a { color: var(--muted); min-height: 2.75rem; display: inline-flex; align-items: center; }
.form-toc a:hover { color: var(--text); }
.work-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-bottom: 7rem; }
.work-form .panel + .panel { margin-top: 0; }
.work-form .panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.work-form .form { margin-top: 1rem; }
.form-row--3 { display: grid; gap: 1.125rem; }
@media (min-width: 768px) { .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.textarea--short { min-height: 5rem; }
.textarea--long { min-height: 14rem; }
.input--sm { min-height: 2.75rem; padding: 0.375rem 0.625rem; }
.input[aria-invalid="true"] + .field__help, .field__help--error { color: #ff9b9b; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0 1rem;
  font-family: var(--font-head); font-weight: 500; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
}
.choice input:checked + span { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent-fill) 16%, var(--bg)); }
.choice input:focus-visible + span { outline: 2px solid var(--spark); outline-offset: 2px; }

.add-row { display: grid; gap: 0.75rem; margin-top: 1rem; align-items: end; }
@media (min-width: 768px) { .add-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
.add-guest { margin-top: 1rem; }
.add-guest summary { cursor: pointer; color: var(--sky); min-height: 2.75rem; display: flex; align-items: center; }

.award-rows { display: grid; gap: 0.5rem; margin-top: 1rem; }
.award-row { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .award-row { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 6rem 4rem; } }

/* อัปโหลดไฟล์ */
.uploader { display: grid; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .uploader { grid-template-columns: 12rem minmax(0, 1fr); } }
.uploader__preview { display: grid; place-items: center; overflow: hidden; background: var(--bg); color: var(--muted); font-family: var(--font-head); box-shadow: inset 0 0 0 1px var(--line); }
.uploader__preview img { width: 100%; height: 100%; object-fit: cover; }
.uploader__preview--wide { aspect-ratio: 16 / 9; }
.uploader__preview--tall { aspect-ratio: 3 / 4; max-width: 9rem; }
.uploader__icon {
  display: grid; place-items: center; width: 5rem; height: 6rem; font-family: var(--font-head); font-weight: 600;
  color: var(--spark); box-shadow: inset 0 0 0 2px var(--spark);
}
.uploader__body { display: grid; gap: 0.375rem; align-content: start; }
.uploader__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.uploader__actions label { cursor: pointer; }
.uploader__status { font-size: 0.875rem; color: var(--sky); min-height: 1.25rem; }
.uploader__file a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.uploader__progress { width: 100%; height: 0.5rem; accent-color: var(--sky); }
.uploader.is-busy { opacity: 0.85; }
.uploader.is-busy .uploader__actions label { pointer-events: none; opacity: 0.5; }
.form--media { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* แถบปุ่มติดล่างจอ */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar__inner { max-width: 80rem; margin-inline: auto; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.action-bar__hint { font-size: 0.875rem; flex: 1 1 18rem; }
.accent-ok { color: var(--teal-bright); }
@media (min-width: 768px) { .action-bar__inner { padding-inline: 2rem; } }

.check--field { align-self: end; }

/* error ตรงช่อง */
.field__error { display: flex; gap: 0.375rem; align-items: flex-start; font-size: 0.875rem; color: #ff9b9b; }
.field__error::before { content: '!'; flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 700; color: var(--bg); background: #ff8a8a; border-radius: 50%; }
.has-error .input, .has-error .textarea, .input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: #ff6b6b; }
.has-error.uploader { box-shadow: inset 3px 0 0 #ff6b6b; padding-left: 1rem; }
#f-team.has-error .table-wrap { border-color: #ff6b6b; }
#f-team > .field__error { margin-top: 0.75rem; }
[id^='f-'] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.missing-link { color: #ff9b9b; text-decoration: underline; text-underline-offset: 3px; margin-left: 0.5rem; white-space: nowrap; }

/* อาจารย์ที่ปรึกษา */
.advisors__filter { max-width: 24rem; margin-bottom: 0.5rem; }
.advisors__list { display: grid; gap: 0 1rem; max-height: 22rem; overflow-y: auto; padding: 0.25rem 0.75rem; border: 1px solid var(--line); background: var(--bg); }
@media (min-width: 768px) { .advisors__list { grid-template-columns: 1fr 1fr; } }
.advisors__item { padding-top: 0.5rem; min-height: 2.5rem; }
.advisors__item:has(input:checked) span { color: var(--sky); }

/* ช่องรหัสผ่าน + ปุ่มรูปตา */
.pw-field { position: relative; }
.pw-field .input { padding-right: 3.25rem; }
.pw-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 3rem; display: grid; place-items: center;
  color: var(--muted); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle[aria-pressed='true'] { color: var(--text); }
.pw-toggle svg { width: 1.25rem; height: 1.25rem; }
.pw-toggle .eye-off, .pw-toggle[aria-pressed='true'] .eye-on { display: none; }
.pw-toggle[aria-pressed='true'] .eye-off { display: block; }

/* ═════════════ หน้าตรวจผลงาน ═════════════ */
.review { display: grid; gap: 1.25rem; }
.review__main, .review__side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.review .panel + .panel { margin-top: 0; }
@media (min-width: 1100px) {
  .review { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .review__side { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.panel--warn { --frame: color-mix(in srgb, var(--spark) 60%, var(--line)); }
.panel--note { --frame: color-mix(in srgb, var(--sky) 60%, var(--line)); }
.panel--actions { --frame: color-mix(in srgb, var(--sky) 40%, var(--line)); }
.review-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.review-form:first-of-type { border-top: 0; padding-top: 0; }
.review-form--danger .field__label { color: #ff9b9b; }
.diff th[scope="row"] { white-space: nowrap; color: var(--muted); font-weight: 500; }
.diff__old { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, #ff6b6b 60%, transparent); }
.diff__new { color: var(--text); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.asset-list { display: grid; gap: 1rem; margin-top: 1rem; }
.asset { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.asset.is-hidden .asset__preview { opacity: 0.35; }
.asset__preview { aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; display: grid; place-items: center; }
.asset__preview img { width: 100%; height: 100%; object-fit: cover; }
.asset__yt { position: relative; display: block; width: 100%; height: 100%; }
.asset__yt span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; color: #fff; text-shadow: 0 0 8px #000; }
.asset__file { font-family: var(--font-head); font-weight: 600; color: var(--spark); }
.asset__title { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-family: var(--font-head); font-weight: 500; }
.asset__meta { font-size: 0.875rem; word-break: break-all; }
.asset__meta a, .link { color: var(--sky); }
.asset__note { font-size: 0.875rem; color: #ff9b9b; }
.asset__form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.asset__form .input { flex: 1 1 14rem; }
.info-list { display: grid; gap: 0.25rem 1rem; margin-top: 1rem; }
.info-list dt { color: var(--muted); font-size: 0.875rem; margin-top: 0.5rem; }
@media (min-width: 768px) { .info-list { grid-template-columns: 10rem minmax(0, 1fr); } .info-list dt { margin-top: 0; } }
.history { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.history li { display: grid; gap: 0.125rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.history p { color: var(--text); white-space: pre-line; }
@media (min-width: 1024px) { .toolbar--4 { grid-template-columns: minmax(0, 1fr) 11rem 11rem 9rem auto; } }
.alert a { color: var(--sky); text-decoration: underline; }

/* ═════════════ โปรไฟล์นิสิต ═════════════ */
.profile-facts { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
@media (min-width: 640px) { .profile-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profile-facts dt { font-size: 0.8125rem; color: var(--muted); }
.profile-facts dd { font-weight: 500; }
.profile-form__other { margin-top: 0.75rem; }
.profile-form__actions { margin-top: 1.25rem; }
.alert__link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ═════════════ ลบถาวร ═════════════ */
.panel--danger { --frame: color-mix(in srgb, #ff8a8a 55%, var(--line)); }
.panel--danger .panel__title { color: #ff9b9b; }
.danger-list { display: grid; gap: 0.375rem; margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.panel--narrow-wide { max-width: 48rem; }
.panel--danger .danger-list + .danger-list { margin-top: 0.75rem; }
.panel--danger .review-form { margin-top: 1.25rem; }
.cell-sub { display: block; margin-top: 0.125rem; font-size: 0.8125rem; overflow-wrap: anywhere; }
.row-delete { margin-top: 0.25rem; color: #ff9b9b; }
.row-delete:hover { color: #ffbaba; }

/* ═════════════ กิจกรรม: แกลเลอรีในฟอร์ม ═════════════ */
.uploader--gallery { grid-template-columns: minmax(0, 1fr) !important; }
.gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.gallery-edit:empty { display: none; }
.gallery-edit__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.gallery-edit__item img, .gallery-edit__item picture { width: 100%; height: 100%; object-fit: cover; }
.gallery-edit__item.is-busy { opacity: 0.5; }
.gallery-edit__del {
  position: absolute; top: 0.25rem; right: 0.25rem; display: grid; place-items: center; width: 2rem; height: 2rem;
  font-size: 1.25rem; line-height: 1; color: var(--text); background: color-mix(in srgb, var(--bg) 80%, transparent); cursor: pointer;
}
.gallery-edit__del:hover, .gallery-edit__del:focus-visible { color: #ff9b9b; }

/* ═════════════ นำเข้านิสิต: ตัวอย่างรูปแบบไฟล์ ═════════════ */
.import-format { margin-top: 0.75rem; max-width: 30rem; }
.import-format .table td, .import-format .table th { padding: 0.5rem 0.75rem; }
.import-rules { margin-top: 0.75rem; display: grid; gap: 0.25rem; padding-left: 1.25rem; list-style: disc; font-size: 0.9375rem; }

/* ═════════════ ผู้ดูแลระบบ ═════════════ */
[data-source][hidden] { display: none !important; }
.pw-notice__list { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.pw-notice__list > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.pw-notice__list dt { color: var(--muted); font-size: 0.875rem; }
.pw-notice__list dd { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; overflow-wrap: anywhere; }
.pw-notice__pw { font-family: var(--font-head); font-size: 1.25rem; letter-spacing: 0.08em; padding: 0.25rem 0.625rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sky); }

/* ═════════════ คู่มือการใช้งาน (นิสิต / ผู้ดูแล) ═════════════ */
/* แต่ละหัวข้อมีสีประจำ (--acc) ใช้กับเลขหัวข้อ แถบสี หัวข้อย่อย และคำเน้น — วนสี 4 สีตามลำดับหัวข้อ */
.help { --acc: var(--sky); display: grid; gap: 1.5rem; max-width: 56rem; }
.help .panel + .panel { margin-top: 0; }
.help-sec:nth-of-type(4n+1), .help-toc li:nth-child(4n+1) { --acc: var(--sky); }
.help-sec:nth-of-type(4n+2), .help-toc li:nth-child(4n+2) { --acc: var(--teal-bright); }
.help-sec:nth-of-type(4n+3), .help-toc li:nth-child(4n+3) { --acc: var(--spark); }
.help-sec:nth-of-type(4n+4), .help-toc li:nth-child(4n+4) { --acc: var(--indigo-bright); }

/* สารบัญ: การ์ดมีเลขสี กดไปหัวข้อ */
.help-toc ol { margin-top: 1rem; display: grid; gap: 0.5rem; counter-reset: toc; }
@media (min-width: 640px) { .help-toc ol { grid-template-columns: 1fr 1fr; } }
.help-toc li { counter-increment: toc; }
.help-toc__a { display: flex; gap: 0.75rem; align-items: center; height: 100%; padding: 0.625rem 0.875rem; color: var(--text); text-decoration: none; background: var(--bg); box-shadow: inset 3px 0 0 var(--acc), inset 0 0 0 1px var(--line); font-weight: 500; transition: background-color .15s, box-shadow .15s; }
.help-toc__a::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--acc); }
.help-toc__a:hover, .help-toc__a:focus-visible { background: color-mix(in srgb, var(--acc) 12%, var(--bg)); box-shadow: inset 3px 0 0 var(--acc), inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, var(--line)); }

/* หัวข้อใหญ่: เลขสีตัวโต + แถบสีด้านบนของกล่อง */
.help section.help-sec { scroll-margin-top: calc(var(--header-h) + 1rem); box-shadow: inset 0 3px 0 var(--acc); }
.help-title { display: flex; gap: 0.875rem; align-items: center; padding-bottom: 0.875rem; border-bottom: 1px solid var(--line); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); font-weight: 700; line-height: 1.3; color: var(--text); }
.help-num { flex: none; display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.375rem; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--bg); background: var(--acc); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }

/* หัวข้อย่อย: สีประจำหัวข้อ + ขีดนำ */
.help-h3 { margin-top: 1.75rem; display: flex; gap: 0.625rem; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--acc); }
.help-h3::before { content: ""; flex: none; width: 0.875rem; height: 3px; background: currentColor; }
.help-title + .help-h3, .help-title + p + .help-h3 { margin-top: 1.25rem; }

/* เนื้อหา: บรรทัดห่าง คำเน้นเป็นสีประจำหัวข้อ */
.help p { margin-top: 0.625rem; line-height: 1.75; }
.help-sec b { color: color-mix(in srgb, var(--acc) 55%, var(--text)); font-weight: 600; }
.help-steps, .help-list { margin-top: 0.625rem; display: grid; gap: 0.625rem; padding-left: 1.5rem; line-height: 1.75; }
.help-steps { list-style: decimal; }
.help-list { list-style: disc; }
.help-steps li::marker, .help-list li::marker { color: var(--acc); font-weight: 700; }
.help-check { margin-top: 1rem; display: grid; gap: 0.5rem; }
.help-check li { position: relative; padding: 0.625rem 0.875rem 0.625rem 2.75rem; line-height: 1.6; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.help-check li::before { content: "✓"; position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; font-size: 0.875rem; font-weight: 700; color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }

/* กล่องหมายเหตุ (i) / คำเตือน (!) */
.help-note, .help-warn { position: relative; margin-top: 1rem; padding: 0.875rem 1rem 0.875rem 3rem; line-height: 1.7; border-left: 4px solid var(--sky); background: color-mix(in srgb, var(--sky) 12%, var(--surface)); }
.help-note::before, .help-warn::before { content: "i"; position: absolute; left: 0.875rem; top: 0.95rem; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; font-weight: 700; font-size: 0.875rem; color: var(--bg); background: var(--sky); border-radius: 50%; }
.help-warn { border-left-color: var(--spark); background: color-mix(in srgb, var(--spark) 12%, var(--surface)); }
.help-warn::before { content: "!"; background: var(--spark); }
.help .help-note b { color: var(--sky); }
.help .help-warn b { color: var(--spark); }
.help code { font-size: 0.9em; padding: 0.05rem 0.375rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.help a:not(.btn):not(.help-toc__a) { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }

/* ภาพรวมเป็นขั้น */
.help-flow { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .help-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.help-flow li { display: grid; gap: 0.375rem; align-content: start; padding: 1rem 0.875rem; background: color-mix(in srgb, var(--acc) 6%, var(--bg)); box-shadow: inset 0 3px 0 var(--acc), inset 0 0 0 1px var(--line); font-size: 0.9375rem; }
.help-flow li b { font-size: 1.0625rem; color: var(--text); }
.help-flow__no { display: grid; place-items: center; width: 2rem; height: 2rem; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--bg); background: var(--acc); }

.help-menu, .help-status { margin-top: 1rem; display: grid; gap: 0.5rem; }
.help-menu > div, .help-status > div { display: grid; gap: 0.25rem; padding: 0.625rem 0.875rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.help-menu dt { font-weight: 600; color: var(--acc); }
@media (min-width: 640px) { .help-menu > div, .help-status > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: baseline; } }
.help-table { margin-top: 1rem; }
.help-table th { color: var(--acc); }
.help-table td { vertical-align: top; line-height: 1.6; }
.help-compare { margin-top: 1rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .help-compare { grid-template-columns: 1fr 1fr; } }
.help-compare__item { --acc: var(--sky); padding: 1rem 1.125rem; background: var(--bg); box-shadow: inset 0 3px 0 var(--acc), inset 0 0 0 1px var(--line); }
.help-compare__item + .help-compare__item { --acc: var(--spark); }
.help-compare__item .help-h3 { margin-top: 0; }

/* คำถามที่พบบ่อย */
.help-faq { margin-top: 0.625rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.help-faq summary { display: flex; gap: 0.75rem; align-items: center; padding: 0.875rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::before { content: "Q"; flex: none; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; font-family: var(--font-head); font-weight: 700; color: var(--bg); background: var(--acc); }
.help-faq summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; color: var(--acc); }
.help-faq[open] { box-shadow: inset 3px 0 0 var(--acc), inset 0 0 0 1px var(--line); }
.help-faq[open] summary { color: var(--acc); }
.help-faq[open] summary::after { content: "−"; }
.help-faq p { margin: 0; padding: 0 1rem 1rem 3.375rem; }