/* ธีม ๑๑๑ ปี สหกรณ์ไทย — เขียวเข้ม + ทอง ตามสื่อประชาสัมพันธ์ทางการ */
:root{
  --green-deep : #0A3B2C;
  --green       : #145240;
  --green-soft  : #E8F1ED;
  --gold        : #C9992E;
  --gold-light  : #E8C86A;
  --gold-pale   : #FBF3DE;
  --ink         : #22302A;
  --muted       : #6B7A72;
  --line        : #E2E7E3;
  --bg          : #FBFAF6;
  --card        : #FFFFFF;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:"Sukhumvit Set","Noto Sans Thai",Tahoma,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.6}
img{max-width:100%; height:auto}

.topbar{position:sticky; top:0; z-index:1200;
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  color:#fff; padding:12px 16px; font-weight:700; font-size:17px;
  display:flex; align-items:center; gap:8px; border-bottom:2px solid var(--gold)}
.topbar a{color:#fff; text-decoration:none}

.wrap{max-width:680px; margin:0 auto; padding:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin:12px 0}
.card.dark{background:linear-gradient(135deg, var(--green-deep), var(--green));
  color:#fff; border-color:var(--green-deep)}
.card.dark .hint{color:#C9D8D1}

h1,h2,h3{line-height:1.35}
.hint{font-size:12.5px; color:var(--muted)}
a{color:var(--green)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none;
  background:var(--green); color:#fff; font-family:inherit; font-size:16px; font-weight:600;
  padding:12px 18px; border-radius:12px; cursor:pointer; text-decoration:none}
.btn.gold{background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--green-deep)}
.btn.outline{background:#fff; color:var(--green); border:1.5px solid var(--green)}
.btn.block{display:flex; width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}

.field{margin:10px 0}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:4px}
.field input,.field select,.field textarea{width:100%; font-family:inherit; font-size:16px;
  padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}

.badge{display:inline-block; font-size:12px; font-weight:700; color:#fff;
  padding:2px 10px; border-radius:99px; background:var(--green)}
.badge.gold{background:var(--gold); color:var(--green-deep)}
.badge.muted{background:#9AA8A1}

/* ─── การ์ดเหรียญ ─── */
.coin{display:flex; gap:12px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--line)}
.coin:last-child{border-bottom:none}
.coin .swatch{width:54px; height:54px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(0,0,0,.12); box-shadow:inset 0 2px 6px rgba(0,0,0,.22)}
.sw-gold  {background:radial-gradient(circle at 35% 30%, #F2D98B, #C9992E 60%, #8A6415)}
.sw-copper{background:radial-gradient(circle at 35% 30%, #E0A87A, #B4692F 60%, #7A3F16)}
.sw-black {background:radial-gradient(circle at 35% 30%, #6E6257, #3A332C 60%, #1C1814)}
.sw-comm  {background:radial-gradient(circle at 35% 30%, #F7E6A9, #D4A537 55%, #8A6415);
  border:3px solid var(--gold)}
.coin h4{margin:0; font-size:15.5px}
.coin .price{font-weight:800; color:var(--green-deep); font-size:16px; white-space:nowrap}

.price-tag{display:inline-flex; align-items:baseline; gap:4px;
  background:var(--gold-pale); border:1px solid var(--gold-light);
  padding:2px 10px; border-radius:99px; font-weight:800; color:var(--green-deep)}

ul.ticks{list-style:none; padding:0; margin:8px 0}
ul.ticks li{padding:6px 0 6px 26px; position:relative; font-size:14.5px}
ul.ticks li::before{content:"✦"; position:absolute; left:4px; color:var(--gold); font-size:14px}

.quote{border-left:3px solid var(--gold); padding:4px 0 4px 12px;
  font-style:italic; color:var(--muted); margin:12px 0}

.empty{text-align:center; color:var(--muted); padding:40px 16px}
.spinner{border:3px solid var(--line); border-top-color:var(--gold); border-radius:50%;
  width:28px; height:28px; animation:spin 1s linear infinite; margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#222; color:#fff;
  padding:10px 20px; border-radius:99px; font-size:14px; z-index:3000; opacity:0; transition:.3s}
.toast.show{opacity:1}