:root{
  --bg: #05100a;
  --bg-2: #071409;
  --green: #009345;
  --green-bright: #17c164;
  --ink: #eef2ee;
  --muted: #7c8a80;
  --line: rgba(238,242,238,0.10);
  --danger: #e0523f;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8vh 6vw;
}
.card{
  width:100%;
  max-width:520px;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:2.4rem 2.2rem;
}
.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--green-bright);
  margin:0 0 0.6rem;
}
h1{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:2.6rem;
  letter-spacing:0.03em;
  margin:0 0 0.4rem;
}
p.sub{
  color:var(--muted);
  margin:0 0 1.8rem;
  font-size:0.95rem;
  line-height:1.5;
}
label{
  display:block;
  font-size:0.8rem;
  letter-spacing:0.04em;
  color:var(--muted);
  margin:1.1rem 0 0.4rem;
}
input, textarea{
  width:100%;
  background: rgba(238,242,238,0.04);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.7rem 0.8rem;
  color:var(--ink);
  font-family:inherit;
  font-size:0.95rem;
}
textarea{ min-height:120px; resize:vertical; }
input:focus, textarea:focus{
  outline:none;
  border-color:var(--green);
}
button{
  margin-top:1.6rem;
  width:100%;
  background: var(--green);
  color:#04140a;
  border:none;
  border-radius:8px;
  padding:0.85rem 1rem;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.02em;
  cursor:pointer;
  transition: background .2s ease;
}
button:hover{ background: var(--green-bright); }
button:disabled{ opacity:0.5; cursor:not-allowed; }
.msg{
  margin-top:1rem;
  font-size:0.88rem;
  line-height:1.5;
}
.msg.ok{ color: var(--green-bright); }
.msg.err{ color: var(--danger); }
/* honeypot field — hidden from real users, bots often fill it in */
.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
a.back{
  color:var(--muted);
  text-decoration:none;
  font-size:0.85rem;
  display:inline-block;
  margin-top:1.6rem;
}
a.back:hover{ color: var(--green-bright); }

/* admin dashboard */
.dash{ max-width:900px; width:100%; }
table{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
  font-size:0.86rem;
}
th, td{
  text-align:left;
  padding:0.7rem 0.6rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{ color:var(--muted); font-weight:600; font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; }
td.msg-cell{ max-width:340px; white-space:pre-wrap; color:var(--ink); }
td.meta{ color:var(--muted); font-size:0.78rem; }
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.5rem;
}
.logout{
  background:none;
  border:1px solid var(--line);
  color:var(--muted);
  padding:0.5rem 0.9rem;
  border-radius:6px;
  font-size:0.8rem;
  width:auto;
  margin-top:0;
}
.logout:hover{ color:var(--ink); border-color:var(--green); background:none; }