@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{--ink:#183130;--muted:#7a8987;--line:#e4ebe8;--green:#008f83;--deep:#075d57;--pale:#eff8f6;--bg:#f6f9f8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}.admin-top{height:68px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1250px)/2))}.admin-top>a:last-child{color:var(--deep);font-weight:700;font-size:12px}.brand{font:800 23px 'Plus Jakarta Sans';letter-spacing:-1px;color:var(--green)}.brand span{color:var(--ink)}.brand small{font:700 10px 'DM Sans';letter-spacing:1px;color:var(--muted)}.admin-wrap{width:min(1250px,calc(100% - 40px));margin:36px auto 70px}.login-panel{width:min(460px,100%);margin:65px auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:35px;box-shadow:0 12px 45px #1831300a}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--green)}h1,h2{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.5px}h1{font-size:27px;line-height:1.25;margin:8px 0}h2{font-size:16px;margin:0}p{color:var(--muted)}label{display:block;font-weight:700;font-size:12px;margin:15px 0;color:#3e5350}input,textarea,select{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #dce6e2;border-radius:8px;background:#fff;font:13px 'DM Sans',sans-serif;color:var(--ink);outline:none}input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px #008f8315}textarea{resize:vertical}.primary,.outline,.text-btn{border:0;border-radius:8px;padding:11px 15px;font:700 12px 'DM Sans';cursor:pointer}.primary{background:var(--green);color:#fff;width:100%;margin-top:8px}.primary:hover{background:var(--deep)}.outline{background:white;border:1px solid var(--line);color:var(--ink)}.text-btn{background:transparent;color:var(--green);padding:6px}.hint{font-size:11px;color:var(--muted)}.message{font-size:12px;min-height:16px;color:#b43c32}.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dash-head p{margin:5px 0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:22px}.stats>div{padding:19px 21px;border:1px solid var(--line);border-radius:12px;background:#fff}.stats span,.stats strong{display:block}.stats span{color:var(--muted);font-size:12px}.stats strong{font:800 28px 'Plus Jakarta Sans';margin-top:4px}.admin-columns{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}.panel{padding:23px;background:white;border:1px solid var(--line);border-radius:13px;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.article-row{padding:15px 0;border-bottom:1px solid var(--line)}.article-row:last-child{border-bottom:0}.article-title{font:700 13px 'Plus Jakarta Sans';margin:0 0 7px;overflow-wrap:anywhere}.article-meta{font-size:10px;color:var(--muted)}.status{display:inline-block;padding:3px 7px;border-radius:4px;font-size:10px;font-weight:700;background:#f3f4f4;color:#687472}.status.published{background:#e4f6ef;color:#087451}.row-actions{display:flex;gap:12px;margin-top:9px}.row-actions button{padding:0;border:0;background:none;font:700 11px 'DM Sans';color:var(--green);cursor:pointer}.row-actions .delete{color:#c64e46}[hidden]{display:none!important}
@media(max-width:850px){.admin-columns{grid-template-columns:1fr}.admin-wrap{margin-top:22px}.login-panel{margin:30px auto}.article-panel{order:2}}@media(max-width:500px){.admin-wrap{width:calc(100% - 24px)}.admin-top{padding:0 14px}.login-panel{padding:24px}.stats{gap:8px}.stats>div{padding:13px}.stats span{font-size:10px}.stats strong{font-size:23px}.panel{padding:16px}.dash-head h1{font-size:23px}}

.image-preview-box {
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid #dce9df;
  border-radius: 10px;
  background: #f5faf6;
}

.image-preview-box img {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 12px;
}

.image-preview-box[hidden] {
  display: none;
}

.cat-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: #e2ede8;
  color: #075d57;
  margin-bottom: 6px;
}
.cat-pill.cat-keislaman {
  background: #008f83;
  color: #fff;
}

/* Tab Switcher */
.admin-nav-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--line);
}
.tab-btn {
  background: transparent;
  border: none;
  font: 700 14px 'Plus Jakarta Sans', sans-serif;
  color: var(--muted);
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  border-radius: 8px 8px 0 0;
}
.tab-btn:hover {
  color: var(--green);
}
.tab-btn.active {
  color: var(--green);
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
}
.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--green);
}

/* Event Cards */
.event-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
}
.event-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.event-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.event-code-badge {
  font-family: monospace;
  font-size: 11px;
  background: #e2f4ec;
  color: #065f46;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.event-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.event-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.event-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.event-btn.btn-qr {
  background: var(--green);
  color: #ffffff;
  border: none;
}
.event-btn.btn-qr:hover {
  background: var(--deep);
}
.event-btn.btn-danger {
  color: #b91c1c;
}
.event-btn.btn-danger:hover {
  background: #fef2f2;
}

/* Attendees list modal */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-modal-backdrop.open {
  display: flex;
}
.admin-modal {
  background: #ffffff;
  border-radius: 18px;
  width: min(780px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  overflow: hidden;
}
.admin-modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.attendee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.attendee-table th, .attendee-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.attendee-table th {
  background: #f8fafc;
  color: var(--muted);
  font-weight: 700;
}