/* Same design tokens as the main site's css/styles.css, so the admin reads
   as part of the same product rather than a bolted-on tool. */
:root{
  --bg:#F5F5FA;
  --surface:#FFFFFF;
  --ink:#181829;
  --ink-soft:#5C5C72;
  --primary:#4B2E83;
  --primary-soft:#EFE9F9;
  --accent:#FF5C8A;
  --accent-2:#FFC53D;
  --line:#E4E1F0;
  --success:#22B573;
  --success-soft:#E3FAF0;
  --danger:#E4463F;
  --danger-soft:#FDECEC;
  --radius:18px;
  --radius-sm:12px;
  --topbar-h:64px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font-family:inherit; border:none; background:none; cursor:pointer;}
a{text-decoration:none; color:inherit;}
input, select, textarea{font-family:inherit; font-size:15px;}
.display{font-family:'Unbounded', sans-serif;}

/* ===== Auth (login) screen ===== */
.auth-body{
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  box-shadow:0 12px 32px rgba(24,24,41,0.08);
}
.auth-logo{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--primary);
  margin-bottom:18px;
}
.auth-logo span{
  color:var(--ink-soft);
  font-weight:500;
  font-size:14px;
  margin-left:6px;
}
.auth-card h1{
  font-size:19px;
  font-weight:600;
  margin-bottom:22px;
}
.auth-form{display:flex; flex-direction:column; gap:16px;}
.auth-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--ink-soft); font-weight:500;
}
.auth-form input{
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease;
}
.auth-form input:focus{border-color:var(--primary);}
.btn-primary{
  padding:12px 16px;
  border-radius:var(--radius-sm);
  background:var(--primary);
  color:#fff;
  font-weight:600;
  font-size:15px;
  transition:opacity .15s ease;
}
.btn-primary:hover{opacity:0.92;}
.btn-primary:disabled{opacity:0.6; cursor:not-allowed;}
.auth-error{
  background:var(--danger-soft);
  color:var(--danger);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13px;
  font-weight:500;
}

/* ===== Admin shell ===== */
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h);
  padding:0 24px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.admin-brand{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--primary);
}
.admin-brand span{
  color:var(--ink-soft);
  font-weight:500;
  font-size:13px;
  margin-left:6px;
}
.admin-user{display:flex; align-items:center; gap:14px; font-size:14px; color:var(--ink-soft);}
.btn-ghost{
  padding:8px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:14px;
  font-weight:500;
  transition:background .15s ease;
}
.btn-ghost:hover{background:var(--primary-soft);}
.admin-shell{
  max-width:1100px;
  margin:0 auto;
  padding:32px 24px;
  color:var(--ink-soft);
}