@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;
}