/* Admin Panjat Pinang — merah-putih, bersih, responsif */
:root{
  --merah:#D9251D; --merah-tua:#7A1017; --emas:#F2B705; --hijau:#1F7A3D;
  --tinta:#3A1013; --krem:#FFF6F0; --line:#f0d9d3; --muted:#9a6a5a;
  --radius:14px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Barlow',system-ui,sans-serif; color:var(--tinta);
  background:linear-gradient(180deg,#fff4ec,#ffe9df);
  min-height:100vh;
}
h1,h2{font-family:'Barlow Condensed','Barlow',sans-serif}
a{color:var(--merah)}
.muted{color:var(--muted); font-size:13.5px; line-height:1.5}
code{background:#fff0ea; padding:1px 6px; border-radius:5px; font-size:12px; color:var(--merah-tua)}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.login-card{
  width:min(400px,94vw); background:#fff; border-radius:22px; padding:34px 28px 26px;
  box-shadow:0 20px 50px rgba(122,16,23,.18); border:2px solid var(--line); text-align:center;
}
.login-emblem{
  width:60px;height:60px;border-radius:50%;margin:0 auto 14px;
  background:radial-gradient(circle at 35% 30%,#ff5b4d,var(--merah));
  display:grid;place-items:center;box-shadow:inset 0 0 0 4px rgba(255,255,255,.5);
}
.login-emblem svg{width:32px;height:32px}
.login-card h1{margin:0 0 4px;color:var(--merah-tua);text-transform:uppercase;letter-spacing:.5px;font-size:26px}
.field{display:block;text-align:left;margin:16px 0}
.field span{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--merah-tua);margin-bottom:6px}
.field input, .paste{
  width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;
  font:inherit;font-size:15px;background:#fffdfc;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus, .paste:focus{outline:none;border-color:var(--merah);box-shadow:0 0 0 3px rgba(217,37,29,.15)}
.back{display:inline-block;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--merah)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:12px;padding:12px 18px;font:inherit;font-weight:700;
  cursor:pointer;text-decoration:none;transition:transform .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.btn:focus-visible{outline:3px solid var(--emas);outline-offset:2px}
.btn.primary{background:var(--merah);color:#fff;box-shadow:0 6px 16px rgba(217,37,29,.3);width:100%}
.btn.primary:hover{background:#c11f18;transform:translateY(-1px)}
.btn.big{width:auto;padding:14px 30px;font-size:16px}
.btn.ghost{background:#fff;color:var(--merah-tua);border:1.5px solid var(--line)}
.btn.ghost:hover{background:#fff0ea}
.btn.ghost.danger{color:#b02020}
.btn.small{padding:8px 14px;font-size:13px;margin-top:12px}

/* ---- Top bar ---- */
.admin-top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.admin-top-in{max-width:1080px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--merah);box-shadow:0 0 0 4px rgba(217,37,29,.15)}
.brand strong{display:block;font-size:16px;color:var(--merah-tua)}
.brand small{color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:8px}

/* ---- Main ---- */
.admin-main{max-width:1080px;margin:0 auto;padding:22px 18px 120px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:20px}
.card.wide{grid-column:1 / -1}
.card h2{margin:0 0 8px;font-size:19px;color:var(--merah-tua)}
.paste{min-height:320px;resize:vertical;font-family:'Barlow',ui-monospace,monospace;line-height:1.6;white-space:pre;overflow:auto;tab-size:20}
.paste-info{margin-top:10px;font-size:12.5px;color:var(--muted)}
.paste-info #row-count{font-weight:700;color:var(--merah)}

/* ---- Checkpoints ---- */
.cp-row{display:grid;grid-template-columns:1fr 62px 1fr 34px;gap:8px;margin-bottom:8px;align-items:center}
.cp-row input{width:100%;padding:9px 10px;border:2px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:#fffdfc}
.cp-row input:focus{outline:none;border-color:var(--merah);box-shadow:0 0 0 3px rgba(217,37,29,.12)}
.cp-del{width:34px;height:38px;border:none;border-radius:9px;background:#fff0ea;color:#b02020;font-size:20px;line-height:1;cursor:pointer;transition:background .16s var(--ease)}
.cp-del:hover{background:#ffd9d0}

/* ---- Aset hadiah ---- */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-bottom:14px}
.asset-item{display:block;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px;text-align:center}
.asset-item img{width:100%;height:80px;object-fit:contain;background:
  linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%) 0 0/16px 16px,
  linear-gradient(45deg,#eee 25%,#fff 25%,#fff 75%,#eee 75%) 8px 8px/16px 16px;border-radius:8px}
.asset-item span{display:block;margin-top:6px;font-size:12px;color:var(--muted);cursor:pointer}
.asset-item input[type=checkbox]{vertical-align:-2px}
.field input[type=file]{padding:9px;background:#fffdfc}

/* ---- Save bar ---- */
.save-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:2px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;
}
.save-bar .muted{max-width:60%}

/* ---- Notice ---- */
.notice{padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px;margin-bottom:16px}
.notice.ok{background:#e8f7ec;color:#186a34;border:1.5px solid #b6e4c3}
.notice.err{background:#fdecec;color:#b02020;border:1.5px solid #f3c2c2}

/* ---- Responsive ---- */
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .save-bar{flex-direction:column;gap:10px;align-items:stretch}
  .save-bar .muted{max-width:100%;text-align:center}
  .btn.big{width:100%}
  .brand small{display:none}
}