:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --ring: rgba(37,99,235,.25);
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Kanit", "Sarabun", Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
}

.back-home-btn{
  position:fixed; top:16px; right:16px; z-index:20;
  display:inline-block; background:var(--primary); color:#fff;
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
  box-shadow:var(--shadow); transition:.2s;
}
.back-home-btn:hover{ background:var(--primary-600); transform:translateY(-1px) }

.header{
  max-width:960px; margin:80px auto 16px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; gap:16px; align-items:center }
.logo{
  width:56px; height:56px; display:grid; place-items:center;
  background:#e8eeff; border-radius:14px; font-size:28px;
  box-shadow: var(--shadow);
}
.header h1{ margin:0 0 6px 0; font-size: clamp(1.1rem, 2.5vw, 1.6rem) }
.header p{ margin:0; color:var(--muted) }

.controls-right{ display:flex; gap:8px; align-items:center }
button{
  border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  background:#eef2ff; color:#1e293b; font-weight:600; transition:.2s;
}
button.ghost{ background:#eef2ff }
button.ghost:hover{ transform:translateY(-1px) }
button.danger{ background:#ffeef0; color:#991b1b }
button.primary{ background:var(--primary); color:#fff; box-shadow: var(--shadow) }
button.primary:hover{ background:var(--primary-600) }

.lang-switch{
  display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:600;
  background:#fff; padding:8px 10px; border-radius:999px; box-shadow:var(--shadow)
}
.lang-switch input{ display:none }
.lang-switch .slider{
  width:42px; height:22px; background:#e5e7eb; border-radius:999px; position:relative;
  margin:0 4px;
}
.lang-switch .slider::after{
  content:""; position:absolute; width:18px; height:18px; top:2px; left:2px;
  background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:.2s;
}
.lang-switch input:checked + .slider::after{ left:22px }
.lang-switch input:checked + .slider{ background:#dbeafe }

.container{
  max-width:960px; margin:0 auto 32px; padding:0 16px;
}

.pane{
  background:var(--card); border-radius:var(--radius);
  box-shadow: var(--shadow); padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px;
}
.pane-head{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.pane-head h2{ margin:0; font-size:1.1rem }
.pane-actions{ display:flex; gap:8px }

textarea{
  width:100%; min-height:320px; resize:vertical;
  border:1px solid #e5e7eb; border-radius:12px; padding:14px;
  background:#f9fafb; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  line-height:1.7; outline:none; transition:.15s;
}
textarea:focus{ border-color:#bfdbfe; box-shadow:0 0 0 4px var(--ring) }

.options{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
@media (max-width:640px){ .options{ grid-template-columns:1fr } }
.opt{ display:flex; align-items:center; gap:10px; color:#111827 }
.opt input{ width:18px; height:18px }

.cta-row{ display:flex; align-items:center; gap:10px }

.stats{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color:#374151; font-size:.95rem; background:#f8fafc; border:1px solid #e5e7eb;
  border-radius:12px; padding:10px 12px;
}

.footer{
  text-align:center; color:var(--muted); padding:24px 16px 60px;
}