/* ── base.css ── reset + ตัวแปรสี + typography ───────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d1017;color:#f3ead6;font-family:"Trebuchet MS",Tahoma,sans-serif;
 display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:8px;user-select:none}
h1{font-size:17px;letter-spacing:2px;color:#ffd98a;margin-bottom:5px;text-shadow:2px 2px 0 #000}

button{font-family:inherit;font-weight:bold;cursor:pointer;color:#2a1f12;
 background:linear-gradient(#ffe8b0,#e0bc74);border:3px solid #6b5636;border-radius:6px;
 padding:7px 11px;font-size:13px;box-shadow:0 3px 0 #4a3a22}
button:hover:not(:disabled){filter:brightness(1.08)}
button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #4a3a22}
button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}

.panel{background:linear-gradient(#2b3242,#1a1f2b);border:4px solid #6b5636;border-radius:8px;
 box-shadow:0 0 0 3px #241a10,0 8px 20px #0009}

.key{background:#3a465c;border-radius:4px;padding:1px 6px;color:#ffd98a;font-size:11px}

#err{position:fixed;left:8px;right:8px;top:8px;background:#5a1010;border:3px solid #ff6a5a;
 color:#ffd8d0;padding:10px;font-size:12px;z-index:999;display:none;border-radius:6px;white-space:pre-wrap}