/* Giao diện chung cho sảnh và các trang tài khoản — cùng tông với game nông trại */
:root{
  color-scheme:dark;
  --ground:#1d2b22;
  --ground-2:#23351f;
  --panel:rgba(20,42,32,.94);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(232,217,160,.2);
  --ink:#f4efdc;
  --ink-dark:#1b1a0f;
  --mute:#b3bda3;
  --rice:#e8b931;
  --leaf:#8fd14f;
  --water:#6ccbe6;
  --clay:#ff7b5c;
  --f-disp:"Baloo 2","Be Vietnam Pro",system-ui,sans-serif;
  --f-ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 var(--f-ui);
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 64px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 64px),
    linear-gradient(160deg,#2a4526,#1d2b22 60%,#172219);}
a{color:var(--rice)}
.wrap{max-width:1040px;margin:0 auto;padding:24px 16px 48px}
.plate{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px}
.hat{width:30px;height:16px;background:linear-gradient(var(--rice),#a97e12);clip-path:polygon(50% 0,100% 100%,0 100%);flex:none}
.brand b{font:800 22px/1 var(--f-disp)}
h1{font:800 34px/1.05 var(--f-disp);margin:0;text-wrap:balance}
h2{font:800 24px/1.1 var(--f-disp);margin:0}
h3{font:700 16px/1.25 var(--f-ui);margin:0}
.lead{color:var(--mute);margin:8px 0 0}
.sub{color:var(--mute);font-size:13px}
button,input{font:inherit;color:var(--ink)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 14px;cursor:pointer;text-decoration:none;color:var(--ink);font-weight:600}
button:hover,.btn:hover{background:rgba(232,185,49,.15);border-color:rgba(232,185,49,.5)}
button:focus-visible,.btn:focus-visible,input:focus-visible{outline:2px solid var(--rice);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
.go{background:var(--rice)!important;color:var(--ink-dark)!important;border-color:var(--rice)!important}
.danger{border-color:rgba(255,123,92,.6)!important;color:#ffc2b3}
.link{background:none;border:0;padding:0;color:var(--rice);font-weight:600;text-decoration:underline;cursor:pointer}
.card{max-width:430px;margin:6vh auto 0;padding:26px 24px 22px}
.field{display:grid;gap:5px;margin-top:14px}
.field label{font-size:13px;color:var(--mute)}
input[type=text],input[type=email],input[type=password]{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.check{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13px;color:var(--mute)}
.check input{margin-top:3px;accent-color:var(--rice)}
.full{width:100%;margin-top:16px}
.msg{margin-top:12px;font-size:13.5px;min-height:1.2em}
.msg.bad{color:#ffc2b3}.msg.good{color:#cdeaa9}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.foot{margin-top:18px;font-size:13px;color:var(--mute);text-align:center}
.note{margin-top:12px;font-size:13px;color:var(--mute);border-left:2px solid var(--line);padding-left:10px}
.chip{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:rgba(143,209,79,.18);color:var(--leaf)}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
[hidden]{display:none!important}
@media (max-width:520px){h1{font-size:28px}.card{margin-top:3vh;padding:22px 18px}}