:root{
  --purple: #514392;
  --coral: #dd7b76;
  --cream: #feeec7;
  --cream-soft: #fff8ea;
  --ink: #201a38;
  --ink-70: rgba(32,26,56,.7);
  --navy: #15112a;
  --green: #2f9e5c;
  --danger: #c8564f;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*, *::before, *::after{ box-sizing: border-box; }
body{
  margin: 0; font-family: var(--font); background: var(--cream-soft); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input, textarea{ font-family: inherit; }

/* ---------- login ---------- */
.login-gate{
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 0%, #241d45 0%, var(--navy) 60%);
  padding: 24px;
}
.login-card{
  background: var(--cream-soft);
  border-radius: 22px; padding: 2.6rem 2.2rem;
  width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.login-logo{ width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1rem; }
.login-card h1{ font-size: 1.3rem; font-weight: 700; color: var(--purple); }
.login-card p{ font-size: .85rem; color: var(--ink-70); margin-top: .6rem; font-weight: 300; }
.login-card input{
  width: 100%; margin-top: 1.6rem; padding: .9em 1.1em;
  border-radius: 100px; border: 1.5px solid rgba(32,26,56,.15);
  font-size: .95rem; outline: none;
}
.login-card input:focus{ border-color: var(--purple); }
.login-card button{ width: 100%; margin-top: 1rem; }
.login-error{ color: var(--danger) !important; font-size: .8rem; margin-top: .8rem; display: none; }
.login-error.is-visible{ display: block; }

/* ---------- buttons ---------- */
.btn-admin{
  display: inline-flex; align-items: center; gap: .5em;
  padding: .75em 1.4em; border-radius: 100px; font-size: .84rem; font-weight: 600;
  border: none; transition: all .2s ease;
}
.btn-admin-primary{ background: var(--purple); color: var(--cream); }
.btn-admin-primary:hover{ background: #3f3475; }
.btn-admin-ghost{ background: transparent; color: var(--ink); border: 1.5px solid rgba(32,26,56,.18); }
.btn-admin-ghost:hover{ border-color: var(--purple); color: var(--purple); }
.btn-admin-sm{ padding: .55em 1.1em; font-size: .78rem; }
.btn-admin-danger{ background: rgba(200,86,79,.1); color: var(--danger); }
.btn-admin-danger:hover{ background: rgba(200,86,79,.2); }

/* ---------- dashboard shell ---------- */
.dashboard{ max-width: 1100px; margin: 0 auto; padding: 2rem clamp(16px,4vw,32px) 6rem; }
.admin-header{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid rgba(32,26,56,.1); margin-bottom: 1.6rem;
}
.admin-header-brand{ display: flex; align-items: center; gap: .8rem; }
.admin-header-brand img{ width: 42px; height: 42px; border-radius: 50%; }
.admin-header-brand strong{ display: block; font-size: 1rem; }
.admin-header-brand span{ font-size: .78rem; color: var(--ink-70); }
.admin-header-actions{ display: flex; gap: .6rem; flex-wrap: wrap; }

.admin-banner{
  background: rgba(81,67,146,.08); border: 1px solid rgba(81,67,146,.18);
  border-radius: 14px; padding: 1rem 1.3rem; font-size: .85rem; font-weight: 300;
  color: var(--ink); line-height: 1.6; margin-bottom: 1.8rem;
}
.admin-banner code{ background: rgba(32,26,56,.08); padding: .1em .4em; border-radius: 4px; font-size: .92em; }

.admin-tabs{ display: flex; gap: .5rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.admin-tab{
  background: transparent; border: 1.5px solid rgba(32,26,56,.15);
  padding: .7em 1.5em; border-radius: 100px; font-size: .85rem; font-weight: 600; color: var(--ink-70);
}
.admin-tab.is-active{ background: var(--purple); border-color: var(--purple); color: var(--cream); }

.admin-panel{ display: none; }
.admin-panel.is-active{ display: block; }
.admin-panel-hint{ font-size: .85rem; color: var(--ink-70); font-weight: 300; margin-bottom: 1.2rem; }
.admin-panel-head{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }

.admin-cards{ display: grid; gap: 1rem; }
.admin-card{
  background: #fff; border: 1px solid rgba(32,26,56,.1); border-radius: 16px; padding: 1.4rem 1.6rem;
}
.admin-card-head{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; }
.admin-card-head h3{ font-size: 1rem; }
.admin-card-head .tag{ font-size: .72rem; color: var(--ink-70); }
.admin-card-body{ margin-top: 1.2rem; display: none; }
.admin-card.is-open .admin-card-body{ display: block; }
.admin-field{ margin-bottom: 1rem; }
.admin-field label{ display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-70); margin-bottom: .4rem; }
.admin-field input, .admin-field textarea{
  width: 100%; padding: .7em .9em; border-radius: 10px; border: 1.5px solid rgba(32,26,56,.15);
  font-size: .9rem; outline: none; resize: vertical;
}
.admin-field input:focus, .admin-field textarea:focus{ border-color: var(--purple); }
.admin-field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-benefit-row{ display: grid; grid-template-columns: 1fr 2fr auto; gap: .6rem; margin-bottom: .6rem; align-items: center; }
.admin-card-actions{ display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.chev{ transition: transform .25s ease; color: var(--ink-70); }
.admin-card.is-open .chev{ transform: rotate(180deg); }

.admin-toast{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140%);
  background: var(--navy); color: var(--cream); padding: .9em 1.6em; border-radius: 100px;
  font-size: .85rem; font-weight: 600; box-shadow: 0 20px 50px -15px rgba(0,0,0,.5);
  transition: transform .4s cubic-bezier(.16,.84,.44,1); z-index: 999;
}
.admin-toast.is-visible{ transform: translateX(-50%) translateY(0); }

@media (max-width: 700px){
  .admin-field-row{ grid-template-columns: 1fr; }
  .admin-header{ flex-direction: column; align-items: flex-start; }
}