.member-page { min-height: 100vh; background: radial-gradient(ellipse at 10% 45%, var(--c-orange-dim), transparent 55%), var(--c-bg); }
.member-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; }
.member-topbar-actions { display: flex; align-items: center; gap: 24px; font-size: .85rem; color: var(--c-text2); }
.member-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center; padding-block: 48px 70px; }
.member-intro h1 { font: 700 clamp(2.2rem,4vw,3.2rem)/1.4 'Anuphan Display',var(--font-body); letter-spacing: -.04em; margin-bottom: 18px; }
.member-intro > p { max-width: 430px; color: var(--c-text2); line-height: 1.9; font-size: .95rem; }
.member-brand-art { position: relative; display: grid; place-items: center; margin-block: 20px; min-height: 225px; background: radial-gradient(ellipse, var(--c-orange-glow), transparent 65%); }
.member-brand-art img { width: 175px; height: auto; filter: drop-shadow(0 10px 24px var(--c-orange-dim)); }
.member-features { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--c-border); padding-top: 22px; color: var(--c-text2); font-size: .78rem; }
.member-features b { color: var(--c-orange); font-family: var(--font-mono); font-weight: 400; margin-right: 6px; }
.member-card { padding: 36px; background: var(--c-card); border: 1px solid var(--c-border2); border-radius: 22px; box-shadow: var(--shadow); }
.member-card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.member-lock { display: grid; place-items: center; width: 46px; height: 46px; background: var(--c-orange-dim); color: var(--c-orange); border: 1px solid var(--c-orange-glow); border-radius: 12px; }
.member-card-heading .tag { margin: 0; font-size: .75rem; }
.member-card h2 { font: 700 1.65rem/1.4 'Anuphan Display',var(--font-body); margin-bottom: 8px; }
.member-card > p { color: var(--c-text2); font-size: .88rem; line-height: 1.8; }
.member-tabs { display: flex; padding: 4px; gap: 4px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg2); margin-block: 25px; }
.member-tabs button { flex: 1; padding: 10px; color: var(--c-text2); border: 1px solid transparent; border-radius: 7px; background: transparent; font: 500 .88rem var(--font-body); cursor: pointer; }
.member-tabs button[aria-pressed="true"] { background: var(--c-card); border-color: var(--c-border2); color: var(--c-orange); box-shadow: 0 2px 6px #0000000a; }
.member-field { margin-bottom: 18px; }
.member-field label { display: block; margin-bottom: 8px; color: var(--c-text); font-size: .87rem; font-weight: 500; }
.member-field input { width: 100%; height: 48px; padding: 12px 14px; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: 9px; font: 1rem var(--font-body); }
.member-field input::placeholder { color: var(--c-text3); opacity: 1; }
.member-field input:focus { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.member-field p { color: var(--c-text2); font-size: .78rem; margin-top: 7px; }
.member-password { position: relative; }
.member-password input { padding-right: 68px; }
.member-password button { position: absolute; inset: 3px 4px 3px auto; padding-inline: 10px; border: 0; border-radius: 6px; color: var(--c-orange); background: transparent; font: .8rem var(--font-body); cursor: pointer; }
.member-message { padding: 12px; border: 1px solid var(--c-orange-glow); background: var(--c-orange-dim); border-radius: 9px; color: var(--c-text); font-size: .88rem; line-height: 1.7; margin-bottom: 16px; }
#memberSubmit { width: 100%; justify-content: space-between; margin-top: 6px; }
.member-help { margin-top: 22px; text-align: center; }
.member-card a { color: var(--c-orange); text-decoration: underline; text-underline-offset: 4px; }
.member-footnote { border-top: 1px solid var(--c-border); padding-top: 22px; margin-top: 22px; text-align: center; }
.member-footer { display: flex; justify-content: center; gap: 12px; padding-block: 24px; color: var(--c-text3); font-size: .73rem; text-align: center; }
@media (max-width: 1000px) { .member-layout { gap: 36px; } }
@media (max-width: 800px) {
  .member-layout { grid-template-columns: 1fr; max-width: 580px !important; gap: 26px; padding-block: 24px 40px; }
  .member-intro h1 { font-size: 2rem; }
  .member-intro h1 br { display: none; }
  .member-intro h1 .accent::before { content: ' '; }
  .member-intro .tag { font-size: .7rem; }
  .member-brand-art, .member-features { display: none; }
  .member-topbar-actions > a { display: none; }
  .member-card { padding: 26px; }
}
@media (max-width: 380px) { .member-card { padding: 20px; } .member-footer { flex-wrap: wrap; } }

/* แถบคั่นและปุ่มเข้าสู่ระบบด้วย Google */
.member-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--muted, #7c7468); font-size: .82rem; }
.member-divider::before, .member-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.member-google { display: flex; justify-content: center; min-height: 44px; color-scheme: light; }
.member-google > div { max-width: 100%; }

/* ---------- หน้าจัดการสมาชิกของผู้ดูแล ---------- */
.admin-members { padding-block: 32px 70px; }
.admin-head h1 { font: 700 clamp(1.9rem,3vw,2.6rem)/1.4 'Anuphan Display',var(--font-body); letter-spacing: -.03em; margin: 10px 0 12px; }
.admin-head > p { max-width: 620px; color: var(--c-text2); font-size: .9rem; line-height: 1.85; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.admin-stat { min-width: 128px; padding: 16px 20px; background: var(--c-card); border: 1px solid var(--c-border2); border-radius: 14px; }
.admin-stat b { display: block; font: 700 1.7rem/1.2 var(--font-body); color: var(--c-orange); }
.admin-stat span { color: var(--c-text2); font-size: .78rem; }
.admin-panel { margin-top: 24px; }
.admin-panel h2 { font: 700 1.3rem/1.4 'Anuphan Display',var(--font-body); margin-bottom: 6px; }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.admin-search { flex: 1; min-width: 220px; }
.admin-search input { width: 100%; height: 44px; padding: 10px 14px; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: 9px; font: .95rem var(--font-body); }
.admin-filters { margin: 0; flex: 0 1 auto; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th { padding: 10px 12px; color: var(--c-text2); font-weight: 500; font-size: .76rem; text-align: left; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.admin-table tr.is-disabled { opacity: .55; }
.admin-who { display: grid; gap: 3px; justify-items: start; }
.admin-who b { font-weight: 600; }
.admin-who span { color: var(--c-text2); font-size: .8rem; word-break: break-all; }
.admin-chip { display: inline-block; margin: 3px 4px 0 0; padding: 3px 9px; border: 1px solid var(--c-orange-glow); border-radius: 30px; background: var(--c-orange-dim); color: var(--c-orange); font-size: .73rem; white-space: nowrap; }
.admin-chip.is-quiet { border-color: var(--c-border2); background: var(--c-bg2); color: var(--c-text2); }
.admin-chip.is-admin { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.admin-chip.is-off { background: #b4231f1a; border-color: #b4231f55; color: #c33; }
.admin-perks small, .admin-when small { display: block; margin-top: 5px; color: var(--c-text2); font-size: .74rem; }
.admin-when { white-space: nowrap; color: var(--c-text2); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-small { padding: 6px 11px; font-size: .78rem; border-radius: 8px; }
.btn-small.is-danger { color: #c33; border-color: #b4231f55; }
.admin-empty { padding: 22px 0; color: var(--c-text2); font-size: .87rem; text-align: center; }
.admin-audit { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.admin-audit li { display: flex; flex-wrap: wrap; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--c-border); font-size: .82rem; }
.admin-audit time { color: var(--c-text2); font-family: var(--font-mono); font-size: .76rem; min-width: 118px; }
.admin-dialog { width: min(440px,92vw); padding: 28px; background: var(--c-card); color: var(--c-text); border: 1px solid var(--c-border2); border-radius: 18px; box-shadow: var(--shadow); }
.admin-dialog::backdrop { background: #0b0a0999; }
.admin-dialog h2 { font: 700 1.35rem/1.4 'Anuphan Display',var(--font-body); }
.admin-dialog > form > p { margin: 4px 0 20px; color: var(--c-text2); font-size: .85rem; }
.admin-check { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: .88rem; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.member-message.is-error { color: #c33; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .admin-table th:nth-child(2), .admin-table td:nth-child(2), .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; } }

/* กล่องรับแบบจากลูกค้า */
.admin-inbox { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill,minmax(min(100%,460px),1fr)); margin-top: 16px; }
.admin-inbox-item { display: flex; gap: 14px; padding: 14px; background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: 14px; }
.admin-inbox-item img { width: 92px; height: 92px; object-fit: cover; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; }
.admin-inbox-item > div { display: grid; gap: 4px; align-content: start; min-width: 0; flex: 1; }
.admin-design-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 4px; padding: 10px; border: 1px dashed var(--c-border2); border-radius: 10px; }
.admin-design-status label { display: grid; gap: 3px; font-size: .75rem; color: var(--c-text2); }
.admin-design-status label:nth-of-type(1), .admin-design-status label:nth-of-type(4) { grid-column: 1 / -1; }
.admin-design-status select, .admin-design-status input, .admin-design-status textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--c-border2); border-radius: 8px; background: var(--c-bg); color: var(--c-text); font: inherit; font-size: .85rem; }
.admin-design-status button { justify-self: start; }
.admin-customer-note { padding: 6px 9px; border-left: 3px solid var(--c-orange); background: var(--c-orange-dim); border-radius: 6px; color: var(--c-text); }
@media (max-width: 560px) { .admin-design-status { grid-template-columns: 1fr; } .admin-inbox-item { flex-direction: column; } }
.admin-inbox-item b { font-size: .95rem; }
.admin-inbox-item span { color: var(--c-text2); font-size: .78rem; word-break: break-all; }
.admin-inbox-item small { color: var(--c-text2); font-size: .78rem; }
.send-shop-dialog .control-group { margin-bottom: 14px; }

/* คลังเส้นพลาสติกและ AMS */
.stock-heading { margin: 26px 0 12px; font: 600 1rem/1.5 var(--font-body); }
.stock-heading small { margin-left: 8px; color: var(--c-text2); font-weight: 400; font-size: .8rem; }
.ams-board { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,520px),1fr)); }
.ams-unit { padding: 16px; background: var(--c-bg2); border: 1px solid var(--c-border2); border-radius: 18px; }
.ams-unit h4 { margin-bottom: 12px; color: var(--c-text2); font: 600 .82rem/1.4 var(--font-mono),var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.ams-slots { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.ams-slot { position: relative; min-height: 118px; padding: 26px 12px 12px; background: var(--c-card); border: 1px dashed var(--c-border2); border-radius: 14px; }
.ams-slot.is-filled { border-style: solid; }
.ams-slot-no { position: absolute; top: 9px; left: 12px; color: var(--c-text2); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; }
.ams-empty { display: grid; place-items: center; min-height: 66px; margin: 0; color: var(--c-text2); font-size: .82rem; }
.spool-shelf { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); }
.spool { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 12px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; }
.ams-slot .spool { padding: 0; background: none; border: 0; }
.spool.is-low { border-color: #b4231f55; }
.spool-roll { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; }
.spool-roll b { display: grid; place-items: center; width: 36px; height: 36px; background: var(--c-card); border-radius: 50%; font-size: .68rem; font-family: var(--font-mono); }
.spool-facts { display: grid; gap: 2px; min-width: 0; }
.spool-facts b { font-size: .9rem; }
.spool-facts span { color: var(--c-text2); font-size: .76rem; }
.spool-actions { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.admin-moves { margin-top: 22px; }
.admin-moves summary { color: var(--c-text2); font-size: .84rem; cursor: pointer; }
.spool-facts .admin-chip { justify-self: start; margin: 4px 0 0; }
.spool-actions .btn { white-space: nowrap; }

/* ---------- ปรับหน้าผู้ดูแลให้เป็นระเบียบ ----------
   home.css ใส่ padding 96px ให้ทุก <section> ของหน้าแรก หน้านี้ต้องยกเลิก ไม่งั้นการ์ดโหรงมาก */
.admin-members section { padding-block: 0; }
.admin-members .admin-panel { padding: 30px 32px; scroll-margin-top: 76px; }
.admin-members .admin-panel > h2, .admin-members .admin-toolbar h2 { margin: 0; }
.admin-members .admin-panel > p { margin: 6px 0 4px; color: var(--c-text2); font-size: .87rem; }
.admin-hero { display: flex; align-items: center; gap: 28px; }
.admin-hero-logo { width: 104px; height: auto; flex: none; filter: drop-shadow(0 8px 22px var(--c-orange-dim)); }
.admin-hero h1 { margin: 6px 0 8px; }
.admin-head { padding-top: 8px; }
.admin-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; margin: 26px 0 4px; padding: 10px 0; overflow-x: auto;
  background: linear-gradient(var(--c-bg) 80%, transparent); scrollbar-width: none; }
.admin-nav a { flex: none; padding: 8px 15px; color: var(--c-text2); border: 1px solid var(--c-border2); border-radius: 30px; background: var(--c-card); font-size: .84rem; text-decoration: none; }
.admin-nav a:hover, .admin-nav a:focus-visible { color: var(--c-orange); border-color: var(--c-orange-glow); }
.admin-members .ams-unit { padding: 18px; }
@media (max-width: 720px) {
  .admin-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .admin-hero-logo { width: 76px; }
  .admin-members .admin-panel { padding: 22px 18px; }
}

/* ข้อความจากฟอร์มติดต่อ */
.admin-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 8px; padding: 0 8px; background: var(--c-orange); color: #16110c; border-radius: 30px; font: 700 .8rem/1 var(--font-body); vertical-align: 3px; }
.admin-count:empty { display: none; }
.admin-messages { display: grid; gap: 12px; margin-top: 16px; }
.admin-message { padding: 16px 18px; background: var(--c-bg2); border: 1px solid var(--c-border); border-left: 3px solid var(--c-orange); border-radius: 12px; }
.admin-message.is-done { border-left-color: var(--c-border2); opacity: .7; }
.admin-message-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.admin-message-head b { font-size: .98rem; }
.admin-message-head span:not(.admin-chip) { color: var(--c-orange); font-size: .86rem; }
.admin-message-head time { margin-left: auto; color: var(--c-text2); font-size: .76rem; }
.admin-message p { margin: 10px 0; color: var(--c-text); font-size: .9rem; line-height: 1.75; white-space: pre-line; }
.admin-message .admin-actions small { align-self: center; color: var(--c-text2); font-size: .75rem; }

/* งานของฉัน */
.jobs-layout { display: grid; gap: 18px; padding-block: 28px 56px; max-width: 980px; }
.jobs-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.jobs-heading h1 { margin: 8px 0 6px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2; }
.jobs-heading p { margin: 0; color: var(--c-text2); max-width: 560px; }
.jobs-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jobs-message { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--c-orange-dim); border: 1px solid var(--c-orange-glow); }
.jobs-message.is-error { background: #b4231f14; border-color: #b4231f55; color: #d9534f; }
.jobs-list { display: grid; gap: 14px; }
.jobs-loading { color: var(--c-text2); }
.jobs-empty { display: grid; justify-items: start; gap: 8px; padding: 26px; border: 1px dashed var(--c-border2); border-radius: 16px; background: var(--c-bg2); }
.jobs-empty p { margin: 0; color: var(--c-text2); }
.job-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-bg2); }
.job-card.is-quoted { border-color: var(--c-orange); box-shadow: 0 0 0 3px var(--c-orange-glow); }
.job-card.is-cancelled { opacity: .7; }
.job-media { width: 132px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--c-bg); border: 1px solid var(--c-border); display: grid; place-items: center; }
.job-media img { width: 100%; height: 100%; object-fit: cover; }
.job-media-empty { color: var(--c-text3); font-weight: 700; letter-spacing: .1em; }
.job-body { display: grid; gap: 10px; min-width: 0; }
.job-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.job-top h2 { margin: 0; font-size: 1.12rem; overflow-wrap: anywhere; }
.job-status { padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--c-bg3); color: var(--c-text2); border: 1px solid var(--c-border2); }
.job-status.is-quoted { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.job-status.is-approved, .job-status.is-printing, .job-status.is-ready, .job-status.is-done { background: #2f9e6a1f; color: #2f9e6a; border-color: #2f9e6a55; }
.job-help { margin: 0; color: var(--c-text2); font-size: .9rem; }
.job-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 2px 0; padding: 0; list-style: none; counter-reset: step; }
.job-steps li { position: relative; padding-top: 12px; font-size: .74rem; line-height: 1.3; color: var(--c-text3); }
.job-steps li::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; border-radius: 5px; background: var(--c-border2); }
.job-steps li.is-done { color: var(--c-text2); }
.job-steps li.is-done::before { background: #2f9e6a; }
.job-steps li.is-current { color: var(--c-text); font-weight: 700; }
.job-steps li.is-current::before { background: var(--c-orange); }
.job-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 0; }
.job-facts > div { min-width: 0; }
.job-facts dt { font-size: .74rem; color: var(--c-text3); }
.job-facts dd { margin: 2px 0 0; font-weight: 600; }
.job-shop-note, .job-my-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-bg); border-left: 3px solid var(--c-orange); }
.job-my-note { border-left-color: var(--c-border2); color: var(--c-text2); }
.job-reply { display: grid; gap: 10px; padding-top: 4px; }
.job-reply-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.job-revise { display: grid; gap: 8px; }
.job-revise label { display: grid; gap: 6px; font-weight: 600; }
.job-revise textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border2); border-radius: 10px; background: var(--c-bg); color: var(--c-text); font: inherit; resize: vertical; }
@media (max-width: 620px) {
  .job-card { grid-template-columns: 1fr; padding: 14px; }
  .job-media { width: 100%; aspect-ratio: 16 / 9; }
  .job-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: .68rem; }
  .job-steps li { font-size: .66rem; }
  .jobs-heading-actions, .job-reply-actions { width: 100%; }
  .jobs-heading-actions .btn, .job-reply-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* A simple design example before sign-in; the editor still requires membership. */
.member-design-example { margin: 24px 0; padding: 20px; border: 1px solid var(--c-border2); border-radius: 16px; background: var(--c-card); }
.member-example-label { color: var(--c-text2); font-size: .78rem; margin-bottom: 14px; }
.member-example-name { max-width: 320px; margin: 0 auto 18px; padding: 16px 20px; border: 4px solid #b58b57; border-radius: 18px; background: #1d343a; color: #f6e7c6; text-align: center; font-size: clamp(1.3rem,3vw,2rem); font-weight: 700; box-shadow: 0 5px 0 #12252a; }
.member-design-example figcaption { color: var(--c-text2); font-size: .8rem; line-height: 1.9; }
@media (max-width: 800px) {
  .member-design-example { padding: 14px; margin-block: 16px 0; }
  .member-example-label { margin-bottom: 10px; }
  .member-example-name { padding: 10px 14px; margin-bottom: 12px; }
}

.member-example-toggle { margin-block: 20px; }
.member-example-toggle > summary { color: var(--c-orange); cursor: pointer; font-size: .88rem; padding: 10px 0; }
.member-example-toggle > summary:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; }
.member-layout > * { min-width: 0; }
.member-field input { min-width: 0; }
.member-design-example { max-width: 100%; }
.member-example-name { width: 100%; overflow-wrap: anywhere; }