:root{
  --ink:#1f2a24;
  --muted:#6b7a72;
  --line:#e4e9e6;
  --panel:#ffffff;
  --accent:#16a34a;
  --accent-dark:#0f8a44;
  --accent-soft:#e7f7ee;
  --blue:#3b82f6;
  --purple:#7c5cff;
  --orange:#f5a524;
  --bad:#e0533f;
  --bad-soft:#fbe9e6;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Prompt', sans-serif;
  background-color:#F7FAF8;
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:1.8; /* กันสระบน-ล่าง (ั ี ึ ๊ ่ ้ ๋ ุ ู) โดนตัด */
}

/* ---------- Header ---------- */
header{
  padding:20px 40px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
}
header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  justify-self:start;
}
header .logo{
  height:170px;
  width:auto;
  display:block;
  transform:translateY(-16px);
}
header .brand-text h2{
  margin:0;
  font-size:20px;
  font-weight:700;
}
header .brand-text p{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
header .hero-inline{
  text-align:center;
  justify-self:center;
}
header .hero-inline h1{
  margin:0;
  font-size:44px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
}
header .hero-inline h1 .hl{ color:var(--accent); }
header .hero-inline .subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13.5px;
}
header nav{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:end;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 14px;
  font-size:13px;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost:active{ transform:scale(.96); }
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:10px;
  padding:8px 16px;
  font-size:13px;
  font-family:inherit;
  font-weight:600;
  color:#fff;
  cursor:pointer;
}
.btn-primary:hover{ background:var(--accent-dark); }

/* ---------- Stat badge (รวมจำนวนแปลง + Free) ---------- */
.stat-badge{
  margin:14px 0;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  background:var(--panel);
  border-radius:999px;
  padding:10px 22px;
  font-size:14px;
  box-shadow:0 6px 20px rgba(20,40,30,.06);
}
.stat-badge .star{ color:#f5b301; margin-right:2px; }
.stat-badge .cnt{ color:var(--accent-dark); font-weight:800; }
.stat-badge .lbl1{ color:var(--muted); font-weight:500; }
.stat-badge .sep{ color:var(--line); margin:0 2px; }
.stat-badge .lbl2{ display:inline-flex; gap:6px; }


/* ---------- Main panels ---------- */
main{
  flex:1;
  padding:8px 40px 16px;
}
.grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
  align-items:stretch;
  position:relative;
}
.col{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(20,40,30,.05);
}
.col .label{
  padding:12px 20px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.col .label .count{
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}
.col .label .actions button{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:none;
  border:none;
  border-radius:8px;
  padding:5px 8px;
  color:var(--accent-dark);
  font-size:13px;
  cursor:pointer;
  font-weight:600;
  margin-left:6px;
  transition:background .15s ease, transform .1s ease;
}
.col .label .actions button:hover{ background:var(--accent-soft); }
.col .label .actions button:active{ transform:scale(.94); }
textarea{
  flex:1;
  border:none;
  resize:none;
  padding:14px 20px;
  font-size:16px;
  line-height:1.6;
  font-family:inherit;
  color:var(--ink);
  background:transparent;
  min-height:170px;
}
textarea:focus{ outline:none; }
textarea[readonly]{ background:#fbfdfc; }

.empty-result{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  padding:20px;
}
.empty-result .big{ font-size:16px; font-weight:700; color:var(--ink); }

.candidates{
  border-top:1px solid var(--line);
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.candidate{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--accent-soft);
  border:1px solid transparent;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-size:13px;
}
.candidate:hover{ border-color:var(--accent); }
.candidate .txt{ font-weight:600; color:var(--ink); }
.candidate .tag{ font-size:11px; color:var(--accent-dark); white-space:nowrap; }

.feedback{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 20px;
  border-top:1px solid var(--line);
}
.fb-copy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, transform .1s ease;
}
.fb-copy:hover{ background:var(--accent-dark); }
.fb-copy:active{ transform:scale(.96); }
.fb-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
  line-height:1.6;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.fb-btn:active{ transform:scale(.95); }
.fb-btn.good{ color:var(--accent-dark); }
.fb-btn.bad{ color:var(--bad); }
.fb-btn:hover{ border-color:currentColor; }
.fb-btn.voted.good{ background:var(--accent-soft); border-color:var(--accent); }
.fb-btn.voted.bad{ background:var(--bad-soft); border-color:var(--bad); }
.fb-btn:disabled{ opacity:.5; cursor:default; }

.swapcol{
  display:flex;
  align-items:center;
  justify-content:center;
}
.swap-ring{
  position:relative;
  width:200px;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background-color:#f4faf6;
  background-image:radial-gradient(rgba(22,163,74,.30) 1.4px, transparent 1.4px);
  background-size:13px 13px;
}
.ring{
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  border:1.5px solid rgba(22,163,74,.35);
  pointer-events:none;
  animation:ringPulse 2.6s ease-out infinite;
}
.ring.r1{ width:120px; height:120px; animation-delay:0s; }
.ring.r2{ width:120px; height:120px; animation-delay:.7s; }
.ring.r3{ width:120px; height:120px; animation-delay:1.4s; }

@keyframes ringPulse{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.6; }
  100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .ring{ animation:none; display:none; }
}
.swapbtn{
  position:relative;
  z-index:1;
  width:120px;
  height:120px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px;
  text-align:center;
  line-height:1.3;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 0 0 8px rgba(22,163,74,.10),
    0 10px 24px rgba(22,163,74,.25);
  transition:transform .15s ease;
}
.swapbtn:hover{ transform:translateY(-2px); }
.swapbtn:active{ transform:translateY(1px); }
.swapbtn .sparkle{ display:block; }
.swapbtn .arrow{ font-size:22px; line-height:1; }

.meta{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  padding:14px 2px 0;
  flex-wrap:wrap;
  gap:6px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:4px 10px;
  line-height:1.5;
  border-radius:999px;
  font-weight:600;
  margin-right:6px;
}

/* ---------- Features strip ---------- */
.features{
  max-width:1180px;
  margin:14px auto 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 24px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.feature{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.feature .icon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.feature.f1 .icon{ background:var(--accent-soft); color:var(--accent-dark); }
.feature.f2 .icon{ background:#eaf1ff; color:var(--blue); }
.feature.f3 .icon{ background:#f1ecff; color:var(--purple); }
.feature.f4 .icon{ background:#fff3e0; color:var(--orange); }
.feature h3{ margin:0 0 2px; font-size:14px; font-weight:700; }
.feature p{ margin:0; font-size:12.5px; color:var(--muted); }

/* ---------- Footer ---------- */
footer{
  max-width:1180px;
  margin:auto auto 0;
  width:100%;
  padding:14px 8px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}
footer .badges{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
footer .fbadge{
  background:var(--accent-soft);
  color:var(--accent-dark);
  border-radius:999px;
  padding:5px 12px;
  font-weight:600;
  font-size:12px;
}


@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
  .swapcol{ order:2; }
  .swapbtn{ transform:rotate(90deg); }
  .features{ grid-template-columns:1fr 1fr; }
  header{ grid-template-columns:1fr; justify-items:center; gap:14px; text-align:center; }
  header .brand{ justify-self:center; }
  header nav{ justify-self:center; }
  header .hero-inline h1{ font-size:26px; }
}

/* ---------- Dark mode ---------- */
body{
  transition:background-color .2s ease, color .2s ease;
}
body.dark{
  --ink:#e7f2ec;
  --muted:#93a89d;
  --line:#2a3630;
  --panel:#1c2621;
  --accent-soft:#1e3a2a;
  --bad-soft:#3a201c;
  background-color:#0f1512;
}
body.dark .col,
body.dark .stat-badge,
body.dark .features,
body.dark .btn-ghost,
body.dark .fb-btn{
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
body.dark textarea[readonly]{ background:#161f1b; }
body.dark .swap-ring{
  background-color:#161f1b;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.4px);
}
body.dark .fb-btn{ background:var(--panel); color:var(--ink); border-color:var(--line); }
body.dark .btn-ghost{ color:var(--ink); }
body.dark .btn-ghost:hover{ color:var(--accent); }