:root{
  --ink:#0f172a; --muted:#64748b; --bg:#e9edf2;
  --accent:#0e7c66; --accent-d:#0a5f4e; --soft:#f1f5f9;
  --warn:#dc2626; --navy:#0b1220; --navy-2:#0f172a;
  --line:#d8dee6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
}
a{color:var(--accent-d);}

/* ===================== HEADER ===================== */
.top{
  background:var(--navy); color:#fff; padding:14px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-bottom:3px solid var(--accent);
}
.top .brand{display:flex;align-items:center;gap:11px;}
.top .badge{
  width:34px;height:34px;border-radius:9px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.5px;
}
.top h1{font-size:16px;margin:0;font-weight:700;}
.top .sub{font-size:11.5px;color:#9fb0c3;margin-top:1px;}
.top .spacer{margin-left:auto;}
.top .logout{
  color:#cbd5e1;text-decoration:none;font-size:12px;font-weight:600;
  border:1px solid #334155;padding:7px 12px;border-radius:8px;
}
.top .logout:hover{background:#1e293b;color:#fff;}

/* ===================== DASHBOARD ===================== */
.wrap{max-width:1080px;margin:0 auto;padding:26px 20px 70px;}
.bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.bar h2{font-size:20px;margin:0;font-weight:700;}
.bar .count{color:var(--muted);font-size:13px;}
.bar .grow{flex:1;}

.btn{
  border:1px solid #cdd5df;background:#fff;color:var(--ink);
  padding:9px 15px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.12s;text-decoration:none;
}
.btn:hover{background:#f8fafc;border-color:#94a3b8;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d);}
.btn .ic{font-size:15px;line-height:1;}

/* grid projek */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.14s;position:relative;
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.card:hover{border-color:#94a3b8;box-shadow:0 6px 20px rgba(15,23,42,.10);transform:translateY(-2px);}
.card .thumb{
  height:132px;background:#eef2f6 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:#b6c0cc;font-size:30px;
  border-bottom:1px solid var(--line);
}
.card .thumb.empty::after{content:"\1F4C4";}
.card .body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card .name{
  font-weight:700;font-size:14.5px;line-height:1.35;color:var(--ink);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:39px;
}
.card .meta{font-size:11.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;}
.card .meta .dot{color:#cbd5e1;}
.card .open-link{position:absolute;inset:0;z-index:1;}
.card .actions{
  display:flex;gap:6px;margin-top:2px;position:relative;z-index:2;flex-wrap:wrap;
}
.card .actions button{
  border:1px solid var(--line);background:#f8fafc;color:#475569;
  font-size:11.5px;font-weight:600;padding:6px 9px;border-radius:8px;cursor:pointer;
}
.card .actions button:hover{background:#eef2f6;border-color:#94a3b8;}
.card .actions button.del:hover{background:#fee2e2;border-color:#fca5a5;color:var(--warn);}

/* empty state */
.empty-state{
  text-align:center;color:var(--muted);padding:60px 20px;
  border:2.5px dashed #b6c2d0;border-radius:16px;background:#fff;
}
.empty-state .ico{font-size:40px;}
.empty-state h3{color:var(--ink);margin:12px 0 5px;font-size:17px;}
.empty-state p{margin:0 0 16px;font-size:13.5px;}

/* ===================== LOGIN ===================== */
.login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #16233b 0%, var(--navy) 60%);
  padding:24px;
}
.login-card{
  background:var(--navy-2);border:1px solid #334155;border-radius:18px;
  width:370px;max-width:100%;padding:34px 30px 30px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.login-badge{
  width:52px;height:52px;border-radius:13px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  margin:0 auto 16px;letter-spacing:.5px;
}
.login-card h1{color:#fff;font-size:20px;margin:0;font-weight:700;}
.login-sub{color:#94a3b8;font-size:12.5px;margin:3px 0 22px;}
.login-label{display:block;text-align:left;color:#cbd5e1;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
.login-input{
  width:100%;border:1px solid #334155;background:#0b1220;color:#fff;
  padding:12px 14px;border-radius:10px;font-size:14px;outline:none;margin-bottom:16px;
}
.login-input:focus{border-color:var(--accent);}
.login-btn{
  width:100%;border:none;background:var(--accent);color:#fff;
  padding:12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:.12s;
}
.login-btn:hover{background:var(--accent-d);}
.login-err{
  background:#3b0d0d;border:1px solid #dc2626;color:#fecaca;
  font-size:12.5px;padding:9px 12px;border-radius:9px;margin-bottom:16px;
}

/* ===================== TOAST ===================== */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--navy-2);color:#fff;border:1px solid #334155;
  padding:11px 18px;border-radius:11px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:.2s;z-index:2000;box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{border-color:#7f1d1d;background:#3b0d0d;color:#fecaca;}

@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr;}
  .card .thumb{height:104px;}
}