*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --green:#1a6b4a;--green-light:#2a9168;--green-pale:#e8f5ee;
  --red:#c0392b;--red-pale:#fdecea;
  --gold:#c8973a;--gold-pale:#fdf3e0;
  --ink:#1c1c1c;--muted:#6b7280;
  --bg:#f4f6f8;--white:#fff;
  --border:#e0e0e0;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --radius:10px;
}

body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}

/* ── Login overlay ──────────────────────────────────────── */
#loginOverlay{
  position:fixed;inset:0;background:linear-gradient(135deg,#0d3d26,var(--green));
  display:flex;align-items:center;justify-content:center;z-index:999;
}
.login-box{
  background:#fff;border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-logo{text-align:center;font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--green);margin-bottom:.3rem}
.login-sub{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:1.8rem}
.login-box input{
  width:100%;border:1.5px solid var(--border);border-radius:8px;
  padding:.75rem 1rem;font-family:'Inter',sans-serif;font-size:.95rem;
  outline:none;transition:border .2s;
}
.login-box input:focus{border-color:var(--green)}
.login-box button{
  width:100%;margin-top:1rem;background:var(--green);color:#fff;border:none;
  padding:.8rem;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;
  transition:background .2s;
}
.login-box button:hover{background:var(--green-light)}
#loginErr{color:var(--red);font-size:.82rem;text-align:center;margin-top:.6rem;min-height:1rem}

/* ── App shell ──────────────────────────────────────────── */
#app{display:none}
header{
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.8rem;box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.header-title{font-family:'Playfair Display',serif;font-size:1.25rem}
.header-sub{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:.1rem}
.btn-logout{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
  padding:.35rem .9rem;border-radius:6px;font-size:.82rem;cursor:pointer;
  transition:background .2s;
}
.btn-logout:hover{background:rgba(255,255,255,.2)}

/* ── Tabs ───────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);background:var(--white);padding:0 1.8rem}
.tab{
  padding:.85rem 1.3rem;font-size:.88rem;font-weight:500;color:var(--muted);
  cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .2s,border-color .2s;white-space:nowrap;
}
.tab.active{color:var(--green);border-bottom-color:var(--green)}
.tab:hover:not(.active){color:var(--ink)}

/* ── Content ────────────────────────────────────────────── */
.content{max-width:1000px;margin:1.8rem auto;padding:0 1.5rem}
.panel{display:none}
.panel.active{display:block}

/* ── Cards ──────────────────────────────────────────────── */
.card{background:var(--white);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem}
.card-title{font-size:1rem;font-weight:600;margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--border)}

/* ── Form elements ──────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-row.single{grid-template-columns:1fr}
.form-row.triple{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group label{font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:.04em}
.form-group input,.form-group select,.form-group textarea{
  border:1.5px solid var(--border);border-radius:7px;
  padding:.6rem .85rem;font-family:'Inter',sans-serif;font-size:.9rem;
  color:var(--ink);background:#fff;outline:none;transition:border .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--green)}
.form-group textarea{resize:vertical;min-height:70px}
.btn-primary{
  background:var(--green);color:#fff;border:none;
  padding:.65rem 1.5rem;border-radius:7px;font-size:.88rem;font-weight:500;
  cursor:pointer;transition:background .2s;
}
.btn-primary:hover{background:var(--green-light)}
.btn-danger{background:var(--red);color:#fff;border:none;padding:.35rem .8rem;border-radius:5px;font-size:.78rem;cursor:pointer;transition:background .2s}
.btn-danger:hover{background:#a93226}
.btn-warn{background:var(--gold);color:#fff;border:none;padding:.35rem .8rem;border-radius:5px;font-size:.78rem;cursor:pointer;transition:background .2s}
.btn-warn:hover{background:#b07a2a}

/* ── Toast ──────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:var(--ink);color:#fff;font-size:.87rem;
  padding:.75rem 1.3rem;border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.2);z-index:9999;
  animation:slideUp .3s ease;max-width:320px;
}
.toast.ok{background:#166534}
.toast.err{background:var(--red)}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Table ──────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead tr{background:var(--green-pale)}
thead th{padding:.75rem 1rem;text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
tbody tr{border-top:1px solid var(--border);transition:background .15s}
tbody tr:hover{background:#f9fafb}
tbody td{padding:.7rem 1rem;color:var(--ink)}
.badge-active{background:var(--green-pale);color:var(--green);font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:99px}
.badge-expired{background:#f3f4f6;color:var(--muted);font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:99px}

/* ── Empty state & Loader ────────────────────────────────── */
.empty{text-align:center;padding:3rem 1rem;color:var(--muted);font-style:italic}
.mini-spinner{display:inline-block;width:18px;height:18px;border:2px solid #ddd;border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:.4rem}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .form-row.triple{grid-template-columns:1fr}
  .tabs{padding:0 .8rem;overflow-x:auto}
  .content{padding:0 .9rem}
}