/* สีจากฉาก (art/STYLE.md palette) ใช้ร่วมกันทุกหน้า */
:root { --cream:#EFD3B0; --light:#FBE7C0; --wood:#CF915F; --wood2:#E3AC79; --ink:#6C543B; --shade:#A58C74;
        --mint:#BBC9A9; --leaf:#8C8560; --bad:#B4553F; --page:#2b2420; }
body { margin:0; background:var(--page); color:var(--ink); font-family:"Sarabun","Noto Sans Thai",system-ui,sans-serif; }
#nav { display:flex; flex-wrap:wrap; gap:4px; padding:8px 16px; background:var(--ink); }
#nav a { color:var(--light); text-decoration:none; padding:6px 10px; border-radius:8px; font-size:15px; }
#nav a:hover { background:#ffffff1f; }
#nav a[aria-current="page"] { background:var(--light); color:var(--ink); font-weight:700; }
#nav a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--mint); outline-offset:2px; }

/* ประตูล็อกอิน (auth.js): ยังไม่ล็อกอิน ซ่อนทุกอย่างยกเว้นฟอร์ม */
html.locked body > *:not(#login) { display:none !important; }
#login { max-width:340px; margin:12vh auto 0; padding:24px; background:var(--light); border:2px solid var(--wood);
         border-radius:14px; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
#login[hidden] { display:none; }
#login h1 { margin:0; font-size:24px; }
#login p { margin:0; }
#login label { display:flex; flex-direction:column; gap:4px; font-size:15px; }
#login input { font:inherit; padding:8px 10px; border:2px solid var(--wood); border-radius:8px; background:#fff; color:var(--ink); }
#login button { font:inherit; font-weight:700; padding:10px; border:0; border-radius:8px; background:var(--ink); color:var(--light); cursor:pointer; }
#login-msg { color:var(--bad); min-height:1.2em; font-size:14px; }
#nav .logout { margin-left:auto; font:inherit; font-size:14px; background:none; border:1px solid var(--shade); color:var(--light);
               border-radius:8px; padding:4px 10px; cursor:pointer; }
@media (max-width: 600px) { #login { margin:6vh 16px 0; } }