:root{
  --bg:#f8f5ef;
  --panel:#faf7f1;
  --panel-soft:#fff;
  --text:#4f5d5a;
  --text-soft:#667571;
  --gold:#b8955f;
  --line:#e8e0d4;
  --danger:#a14f4f;
  --success:#2f7a57;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#fcfbf8 0%,#f4eee5 100%);
  color:var(--text);
}

.login-page,
.dashboard-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.login-card,
.dashboard-card{
  width:min(920px,100%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:1.75rem;
  padding:2rem;
  box-shadow:0 18px 40px rgba(26,41,38,.08);
}

.eyebrow{
  margin:0 0 .6rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--gold);
  font-size:.78rem;
}

h1{
  margin:0 0 .75rem;
  font-size:2rem;
  line-height:1.05;
}

h2{
  margin:0 0 .8rem;
  font-size:1.2rem;
}

.login-text{
  margin:0 0 1rem;
  color:var(--text-soft);
  line-height:1.6;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.login-form label{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.login-form span{
  font-size:.92rem;
  color:var(--text-soft);
}

.login-form input{
  border:1px solid #d8cdbc;
  border-radius:1rem;
  padding:.9rem 1rem;
  font:inherit;
  background:#fff;
}

.login-form button,
.logout-btn,
.table-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.9rem 1.25rem;
  border-radius:1rem;
  border:1px solid #cdbda4;
  background:#f7f2eb;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font:inherit;
}

.alert-error,
.alert-success{
  margin:0 0 1rem;
  padding:.9rem 1rem;
  border-radius:1rem;
  border:1px solid;
}

.alert-error{
  background:#f8e7e7;
  color:var(--danger);
  border-color:#e7caca;
}

.alert-success{
  background:#eaf6ee;
  color:var(--success);
  border-color:#cde5d5;
}

.dashboard-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.5rem;
}

.info-box,
.placeholder-box{
  border:1px solid var(--line);
  border-radius:1.25rem;
  padding:1rem 1.2rem;
  background:var(--panel-soft);
}

.info-box{
  margin-bottom:1rem;
}

.info-box p{
  margin:.2rem 0;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.button-row-admin{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.users-table-wrap{
  overflow:auto;
}

.users-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1rem;
  overflow:hidden;
}

.users-table th,
.users-table td{
  padding:.9rem .8rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.users-table th{
  background:#f7f2eb;
}

.users-table tr:last-child td{
  border-bottom:0;
}

@media (max-width: 800px){
  .dashboard-top{
    flex-direction:column;
  }

  .admin-grid{
    grid-template-columns:1fr;
  }

  .login-card,
  .dashboard-card{
    padding:1.4rem;
  }
}